Sprite Image Repet CSS3 Techniques

by muthu 2014-04-03 11:14:05

Sprite Image Repet CSS3 Techniques

-------------------------------------------DEMO---------------------------------------------------
sprite_repeat.jpg
-------------------------------------------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--------------------------------------------------
sprite_image.png
692
like
0
dislike
0
mail
flag

You must LOGIN to add comments