Search the Community
Showing results for tags 'sprites'.
Found 1 result
-
ive been researching how to provide a background image to a div and have it be responsive in size. as the browser window narrows, i would like the image to get smaller. the image used is a sprite so that upon hover, you see a different version of the original image. it works great except that at varying browser widths, the hover event causes a slight dislocation of the hover image. you can see what i mean at the link below. at full-width, it seems to work great in all browsers. as the browser shrinks, the hover event at times causes glitches. anyone have thoughts on whats going on here or a better way to tackle the responsive sprite problem? url: http://buildmyweb.org/new/ html: <div id='hexagon_container'> <a href='' class="services_hexagon"></a> <a href='' class="services_hexagon"></a> <a href='' class="services_hexagon"></a> <a href='' class="services_hexagon"></a> </div> css: #hexagon_container { float:left; width:100%; background:#feb914; } .services_hexagon { float:left; display:block; width:15%; height:0; padding-bottom:13%; margin-right:13.33%; text-indent:-3000px; background:url('pics/octagons/oct_gd.png') center top; background-size:cover; } .services_hexagon:last-of-type { margin-right:0px; } .services_hexagon:hover { background-position:center bottom; }
