Responsive Background Images for Div

[BuildMyWeb]

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; }

Edited March 2, 2015 by BuildMyWeb

[jeffreyappel]

"last-of-type " should be applied on <p>.

 

This give you some idea:

#hexagon_container {
    float:left;
    width:100%;
    background:#feb914;
}
.services_hexagon {
    float:left;
    display:block;
    width:100%;
    height:100%;
    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;
    background-color: yellow;
}