Hey there, this site is pretty old now. I've decided to leave it up as I put a lot of work into it and would hate to see it disappear.

Display Tags For 'mobile'

Improve Responsive Designs & Re-Use Images With CSS3's Background-Size Property

Neal Grosskopf
8/18/2011 8:44:00 PM
View the Demo

The Same CSS Sprite
Re-Used Multiple Times

An example of how the same CSS sprite can be used for multiple icons sizes. Check out my demo to see this in action.

I'll admit it, I've been living in a CSS 2.1 world for too long. For almost my enter career as a developer I've only needed to use four CSS background properties - background-color, background-image, background-repeat & background-position...until now.

I've been aware of the CSS3 property background-size for quite awhile now but I could never think of a useful scenario to implement it. I was working on a project at work that listed out social media icons two times on the same page, but in different sizes. I thought to myself "gez, it would be nice if I could just re-use the same CSS sprite twice for the same set of icons?" With CSS this is possible.

My CSS Sprite

I'm still a big fan of CSS sprites as they cut down on unnecessary requests to the server and keep the server free of extra image files. Below is the CSS sprite I originally used for the footer area of the page.

CSS Sprite

Header Example

Below is an example, to scale, of what the header area of the page looks like with it's social media icons.

Header Example

Footer Example

Below is another example, to scale, of what the footer area of the page looks like with it's social media icons.

Footer Example

As you can see, both areas are identical, other than one is larger than the other.

HTML Structure

Below is the HTML structure I used for each list of social media icons. The only thing needed to be tweaked from one size to another is the ID attribute.

<ul id="small-social" class="social"> <li class="facebook"><a href="http://www.facebook.com/"><span>Facebook</span></a></li> <li class="twitter"><a href="http://www.twitter.com/"><span>Twitter</span></a></li> <li class="youtube"><a href="http://www.youtube.com/"><span>YouTube</span></a></li> <li class="linkedin"><a href="http://www.linkedin.com/"><span>LinkedIn</span></a></li> <li class="scribd"><a href="http://www.scribd.com/"><span>Scribd</span></a></li> </ul>

Scaling The Image

The CSS to scale the sprite from one size to another is quite simple. Below I assign the background-image and set the background-size: 100%.

.social li a { background-image: url(social-sprite.png); background-position: no-repeat; -moz-background-size: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }

Positioning the CSS Sprite

Next I position the CSS sprite hooking into my classes. Originally I had used fixed-height pixel dimensions but I discovered that I could use percentages and save myself 5 lines of code per use.

.facebook a { background-position: 0% 0%; } .twitter a { background-position: 0% -100%; } .youtube a { background-position: 0% -75%; } .linkedin a { background-position: 0% -50%; } .scribd a { background-position: 0% -25%; }

Below is an example of my old code which I was able to get rid of by using the code above. My code above makes it much more flexible!

#small-social .facebook a { background-position: 0px 0px; } #small-social .twitter a { background-position: 0px -16px; } #small-social .youtube a { background-position: 0px -32px; } #small-social .linkedin a { background-position: 0px -48px; } #small-social .scribd a { background-position: 0px -64px; } #large-social .facebook a { background-position: 0px 0px; } #large-social .twitter a { background-position: 0px -30px; } #large-social .youtube a { background-position: 0px -60px; } #large-social .linkedin a { background-position: 0px -90px; } #large-social .scribd a { background-position: 0px -120px; }

Controlling the Size

Finally the only real customization we need to do to our unordered list is setting the height and width. By simply changing these values, the sprite will automagically resize itself to fill the bounds of the anchor.

/* Example 1 */ #small-social li a { height: 16px; width: 16px; } /* Example 2 */ #medium-social li a { height: 25px; width: 25px; } /* Example 3 */ #large-social li a { height: 30px; width: 30px; }

Outcome of Our Code

The above code would generate the following below -

View the Demo

Check out my demo to see this in action >>

What About Browsers That Don't Support Background-Size?

If you need to support browsers that do not have this functionality, simply use Modernizr to target them and serve them up a resized image.

.no-backgroundsize #small-social li a { background-image: url(toolbar-social-sprite.png); }

This works nice, by giving users of a more modern browser a better experience while quasi-punishing users who refuse to upgrade.

Use in Responsive Designs

I found another way to use background-size was in responsive designs. The site I was working on required this functionality so I decided to see if I could use this to scale a background-image as the browser window become smaller.

Below is my code I used for all screen sizes. This is a simple anchor nested within an H1 with a height and width set.

h1 a { background: url(logo.png) no-repeat left top; display: block; height: 43px; width: 180px; }

Below is my code used for the responsive design. This uses CSS Media Queries to determine when the browser window is narrower than 180px; When the window becomes smaller than that, the logo automagically resizes to the width of the window. This stops it from being cutoff.

@media (max-width: 180px) { h1 a { background-size: 100%; max-width: 100%; width: auto; } }

Further Reading


<< Back