2

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

this footer

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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
brendosthoughts
  • 1,683
  • 5
  • 21
  • 38
  • hello, here i have a test page http://codepen.io/gcyrillus/pen/KuJDl on sprite being resized preserving ratios of box where they are displayed. I took a look to the code of your page, too messy to my mind for a sunday ;) ... , hope this gives you a good hint on how to , have a nice day – G-Cyrillus Dec 01 '13 at 10:35
  • In your current website the alpine canada logo scales weird because you have set a height and a width as a percentage. Set the height to auto to fix this. Since your images are not the same height and width it will be hard to make this work. – Bas van Dijk Dec 01 '13 at 10:37
  • @GCyrillus awesome thanks for this exactly what I needed I am sure I can figure it out from here much appreciated! – brendosthoughts Dec 01 '13 at 10:53
  • @brendan morisson you are welcome, see below an answer to help you start with :) – G-Cyrillus Dec 01 '13 at 11:19
  • @GCyrillus any chance I can get some help ... Still not quite getting something http://codepen.io/brendosthoughts/pen/fnthv is there anything wrong with this technique http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite ? ... seems a little dated / not mentioned much elsewhere on the web – brendosthoughts Dec 01 '13 at 16:59
  • @GCyrillus think I finally wrapped my head around it :) thanks again sorry for repeatedly pinging inbox – brendosthoughts Dec 01 '13 at 17:41
  • 1
    hi, oki, i just forked it . to help you need to have image in html and inset shadows on li, so you have points to tell what's going on and if you are keeping the right ratio for each pieces . http://codepen.io/gc-nomade/pen/cxDIh – G-Cyrillus Dec 01 '13 at 17:51
  • @GCyrillus thank you agian so much! ... clearly still have some learning to do you've been an amazing help though – brendosthoughts Dec 01 '13 at 19:17

1 Answers1

0

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(https://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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129