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.
Header Example
Below is an example, to scale, of what the header area of the page looks like with it's social media icons.
Footer Example
Below is another example, to scale, of what the footer area of the page looks like with it's social media icons.
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 -
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;
}
}
