Sprite Image Repet CSS3 Techniques
by muthu[ Edit ] 2014-04-03 11:14:05
Sprite Image Repet CSS3 Techniques
-------------------------------------------DEMO---------------------------------------------------
-------------------------------------------HTML5---------------------------------------------------
<h2>Sprite Image Repet CSS3 Techniques</h2>
<div id="Sprite_bg1">Sprite Background 1 <br> Sprite Background 1 <br> Sprite Background 1 <br> Sprite Background 1 <br> Sprite Background 1</div>
<div id="Sprite_bg2">Sprite Background 2 <br> Sprite Background 2 <br> Sprite Background 2 <br> Sprite Background 2 <br> Sprite Background 2</div>
<div id="Sprite_bg3">Sprite Background 3 <br> Sprite Background 3 <br> Sprite Background 3 <br> Sprite Background 3 <br> Sprite Background 3</div>
-------------------------------------------CSS3---------------------------------------------------
div { background-image:url(sprite_image.png); background-repeat:repeat-y; width:160px; padding:20px; margin:10px; float:left; font:bold 14px Arial, Helvetica, sans-serif;
color:#fff; text-align:center; }
#Sprite_bg1 { background-position:0px; }
#Sprite_bg2 { background-position:-200px; }
#Sprite_bg3 { background-position:-400px; }
h2 { font:bold 24px Arial, Helvetica, sans-serif; margin:0; }
-------------------------------------------IMAGES--------------------------------------------------
