Using sprites within a div of 100%

Question

I am attempting to use sprites for the first time... It took a minute or two to wrap my head around it, but I got the basic implementation of it. However, I am attempting to use the sprite to replace

which you can see a live example of here. The problem I am having is I have a footer set up like so:

 footer{
    width: 100%;
    height: 11%;
    position: fixed
    bottom: 0px;
 }

And each image occupies a percentage width of the foot. For example,

.head{
   width: 18%
   height: 100%;
}

So that, as the browser window is made larger or smaller, the images scale with it... (Note: From 1150 pixels or larger then other media queries handle.)

Now I have figured out how to replace all the images in the footer with a single sprite.

Like so, just to make sure I do get it:

 /* html*/

  <div id="head-hover">
       <a href="#" class="logo_head_thumb"></a>
  </div>

 /*css */

 .moneda-logo, .logo_head_thumb, .Swix-logo-thumb, .scotiaMcleod, .POC-logo1,
 .alpine-canada-logo-thumb, .cowboy-logo, .Love, .maddy, .gray, .delsorbo, .bietz{
    background: url('https://s3.amazonaws.com/benjaminthomsen.images/sprites.png') no- repeat;
 }
.logo_head_thumb{
    background-position: 0 -210px ;
    width: 300px;
    height: 60px;
    padding-right: 100%;
    padding-bottom:16%;
}
#head-hover{
   float:left;
   height: 100%;
   width: 15.9%;
}

(A little tweaking still needed but more or less), but you can see my attempt thus far over here ... originally done with a footer width of 1920 pixles.

The problem is, as it scales down the width of each div, as it's a percentage also scales (div of width 300 pixels becomes 200 pixels, for example) and the total sprite image does not scale or fit in the new space.

Is there some easy way that I can have the new footer bar with sprites act like the one that is currently on the live site?

Without having to resize the sprite .png image along with rewriting all of the CSS within media queries every 20 or 30 pixels (as this is currently the only way I see possible) or perhaps there is a jQuery script that can be utilized or am I actually not grasping how to properly use sprites at all. I would really like to save the extra 14 or so HTTP requests that using a sprite would alleviate, but I don't care to modify the user interface of the current site.

Answer 1

Here is an example using inline-block (it could be shorterer achieved with table/table-cell):

ul , body{
  margin: 0;
  padding: 0;
}
img {width: 100%;}
ul {
  width: 100%;
  font-size: 0;}
ul:before {
  content: '';
  display: inline-block;
  padding-top: 5%;
  vertical-align: top;
}
li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-size: auto 100%;
  background: url(http://i.stack.imgur.com/2xDHJ.png);
}
li:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
}
li a {
  display: inline-block;
  font-size: 32px;
  font-size: 2rem;
  vertical-align: middle;
  line-height: 5vw;
  height: 5vw;
  width: 8vw;
  /* To show them for tst */
  color: turquoise;
  text-shadow: 0 0 0.5em lime;
}
#sp1 {
  width:9%;
  background-size: auto 100%;
}
#sp1:before {
  padding-top: 59%;
}
#sp2 {
  width: 15%;
  background-size: auto 100%;
  background-position: 10.5% 0;
}
#sp2:before {
  padding-top: 35%;
}
#sp3 {
  width:17%;
  background-size: auto 100%;
  background-position: 29% 0;
}
#sp3:before {
  padding-top: 31%;
}
#sp4 {
  width: 15%;
  background-size: auto 100%;
  background-position: 48% 0;
}
#sp4:before {
  padding-top: 35%;
}
#sp5 {
  width: 19%;
  background-size: auto 100%;
  background-position: 69% 0;
}
#sp5:before {
  padding-top: 28%;
}
#sp6 {
  width: 14%;
  background-size: auto 100%;
  background-position: 88% 0;
}
#sp6:before {
  padding-top: 38%;
}
#sp7 {
  width:11%;
  background-size: auto 100%;
  background-position: 100% 0;
}
#sp7:before {
  padding-top: 48%;
}

See and play with result here :) - http://codepen.io/gc-nomade/pen/Hezro