Effect preview:
Code:
CSS:
Code
. Box { Background : URL (http://static.linkedin.com/img/bg/bg_box_ltblue_800x800.gif) # fff no-repeat 100% 100% ; Width : 500px ; }
. Box. Content { Background : URL (http://static.linkedin.com/img/bg/bg_box_ltblue_800x800.gif) # fff no-repeat 100% 100% }
. Box. Title { Background : URL (http://static.linkedin.com/img/bg/bg_box_ltblue_800x800.gif) # fff no-repeat 100% 100% }
. Box. Title h3 { Background : URL (http://static.linkedin.com/img/bg/bg_box_ltblue_800x800.gif) # fff no-repeat 100% 100% }
. Box { Padding-Right : 15px ; Padding-left : 0px ; Padding-bottom : 0px ; Margin : 15px 0px ; Padding-top : 0px }
. Box. Title { Padding-Right : 15px ; Background-Position : 100% 0px ; Padding-left : 0px ; Padding-bottom : 0px ; Margin : 0px-15px 0px 0px ; Padding-top : 0px }
. Box. Title h3 { Padding-Right : 0px ; Background-Position : 0px 0px ; Padding-left : 15px ; Padding-bottom : 5px ; Margin : 0px ; Padding-top : 15px ; Height : 1% }
. Box. Content { Padding-Right : 0px ; Background-Position : 0px 100% ; Padding-left : 15px ; Padding-bottom : 15px ; Margin-Right : 0px ; Padding-top : 0px }
HTML:
Code
< Div Class = "Box" >
< Div Class = "Title" > < H3 > Title </ H3 > </ Div >
< Div Class = "Content" >
< Div > Content </ Div > < Div > Content </ Div > < Div > Content </ Div > < Div > Content </ Div >
</ Div >
</ Div >
Material (background ):Http://static.linkedin.com/img/bg/bg_box_ltblue_800x800.gif