Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 6 ■ BOX MODELS PROPERTIES


Background


HTML


<h1>Background</h1>
<p><span class="no-bg"> </span>No background</p>
<p><span class="bg-color"> </span>Background color</p>
<p><span class="bg-image"> </span>Background image not tiled</p>
<p><span class="bg-repeat"> </span>Background image tiled</p>
<p><span class="bg-rx"> </span>Background image repeat-x</p>
<p><span class="bg-ry"> </span>Background image repeat-y →</p>
<p><span class="bg-pos-lt"> </span>Background image center bottom</p>
<p><span class="bg-pos-rb"> </span>Background image right bottom</p>

CSS


p { margin-left:240px; margin-top:0px; margin-bottom:10px; }
span { margin-left:-230px; margin-right:30px; padding-left:195px; font-size:19px;
background-position:left bottom; background-repeat:no-repeat;
background-color:black; background-image:url("star.gif"); }

*.no-bg { background-image:none; background-color:transparent; }
*.bg-color { background-image:none; background-color:black; }
*.bg-image { background-repeat:no-repeat; }
*.bg-repeat { background-repeat:repeat; }
*.bg-rx { background-repeat:repeat-x; }
*.bg-pos-lt { background-position:center bottom; }
*.bg-pos-rb { background-position:right bottom; }
*.bg-ry { background-repeat:repeat-y; background-position:center top;
padding-left:22px; float:right; height:263px; margin:0px;
position:relative; top:-170px; }
Free download pdf