Working With CSS Sprites

What is a CSS Sprite anyways?

Sprites are compiled versions of different creative parts of a website that typically has no need for repeating axises. Sprites are recommended to be used when ever possible to help cut down on HTTP requests to the server, and ultimately help speed up the performance of your website.

You should never include creative into a sprite that is page or content specific, or will need to be frequently updated. You absolutely can’t add creative that needs to be repeated on both the x and y value. You can however add creative that needs to be repeated by a single x or y axis, but only if you prepare the sprite so it indeed repeats from edge to edge of that sprites axis.

When thinking about how to organize my sprites, I tend to group everything into two parties:

• A global look and feel sprite.
• All other specific Case Scenarios sprites.

A global sprite is made up of all large site wide repeating creative parts (such as header and footer contents) that are compiled into a single image. Whereas specific case scenario sprites (such as custom buttons and their events) are on their own and should never be included into the global sprite. Again, we define this clear division based on the likely hood of the sprite ever needing to be update or changed at a later point.

Lets take a look at a global site sprite:

A global site sprite.

As you can see in the above sprite, we have most of the sites global creative components compiled into a single image. We even at the bottom of the above sprite have a perfect example of a creative part needing to be repeatable in (in this example the x axis) a single axis. Elements such as buttons that have different event states (hover,clicked or disabled) should always be a sprite no matter what, but again never added to this global sprite.

A button sprite, see how it’s setup to be used on a sliding door technique and has two event states.

Now that we have a good understanding of the requirements and organization or sprites, lets to dig into the CSS concepts of using our sprites with our site elements. You have two methods to set your sprites as background on elements with CSS, and they are:

• background
• background-image

Here are examples of these two background setting methods:

#element{
    background:url("../sprite.png") x y no-repeat;
}

The above is the short hand version of setting the background image,  x y positions (typically pixel values) and if the background should be repeatable or not. Again, with sprites you will only ever be using either no-repeat, repeat-x or repeat-y.

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

.element-one { background-position:x y; }
.element-two { background-position:x y; }

The above version makes use of the long hand version to set the sprite over two elements, make it not repeatable and then give two unique axis position values over the two elements.

As stated above, you may set the position values in pixel, but you can also position words as well:

.element-one { background-position:0 0; }
.element-two { background-position:right bottom; }

In the above example “.element-one” gets a very specific pixel x and y axis value(equals top left). Our “.element-two” however, just states its x and y values by using top, right, bottom or left words. This really comes in handy when you have the need to position the sprite to element constantly to the top, right, bottom or left, under any width or height variants.

As mentioned a few times now, buttons that have different creative states should be compiled into their own sprite. You can then use such things as the CSS pseudo hover selector to change between different creative states like so:

.element-two:hover { background-position:right top; }

You can also have “conditional” classes that change the sprites background-position over your elements with help of JavaScript, like so:

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

/*The Conditional Classes*/
.on { background-position:left top; }
.off { background-position:left bottom;}

//jQuery code
$('.element-one,.element-two').toggle(function(){
    $(this).removeClass('off').addClass('on');
},function(){
    $(this).removeClass('on').addClass('off');
});

We set our sprite to the background of our two elements (.element-one, .element-two) and then change the background-position through the on and off classes. Next we use a little jQuery to toggle the adding and removing of our on and off classes over our two elements when ever they happen to be clicked.

Here is an advanced example of using a simple sprite with CSS and JavaScript:

• Hover, then click me:

  • Header to the content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

    A chiropractic manipulation can help realign the vertebrae, restore motion, and relieve order cheap viagra the pressure within the common bile duct causing pain. It has been noticed that a majority of men tend to face difficulty while approaching shops to buy these drugs. low price levitra Normal rules pertaining to dosage, apply and you have to limit yourself to one capsule a day and you should take them around 45 minutes before you plan to have sex (many men take tadalafil canadian about 2-4 hours before sexual activity). If you notice any side effects or adverse results can be avoided. online viagra soft

• Hover, then click me:

  • Header to the content 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

>> Click Here for Above Example’s Code
>> Click Here for Above Example’s Sprite

Final Thoughts

Lastly, because our sprites make use of some very specific x and y pixel or word based positioning, it’s very important that you update sprites with extreme caution. A slight addition or subtraction to a sprite’s creative location or overall dimensions means having to fix all your CSS position values. So I say it again, we make a clear division between global sprite and specific case scenarios based off the likely hood of the sprite ever needing to be updated.

And that’s it, I hope this little article helps a few people gather what they need in order to create great site sprites.

Thanks everyone.

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me: