Skip to Content

Sprite Cow: An Online Tool to Save Time Calculating CSS Background-Position.

The author

Epiphany Search

As a front end developer, I usually spend some time at the start of a new project slicing up the design to save out all the elements I’m going to need to use in my HTML templates. In addition to this I will also try and combine similar elements such as hover/focus/active states for multiple elements into single images known as ‘sprites’.

As a front end developer, I usually spend some time at the start of a new project slicing up the design to save out all the elements I’m going to need to use in my HTML templates. In addition to this I will also try and combine similar elements such as hover/focus/active states for multiple elements into single images known as ‘sprites’.

If I was to not use a sprite, and write some CSS to style a website’s navigation that uses background images behind the navigation text, I would have to specify one default background image for the links and a separate image for when a user hovers over the link. I might also have to use more images if the design caters for the active/current states. [code lang="css"] nav a, nav a:visited {background: url(/images/nav-bg.png) bottom repeat-x;} nav a:hover, nav a:focus {background-image: url(/images/nav-bg-hover.png);} [/code] Doing it this way would mean that when the page first loads, the web browser downloads the default state for the link. When a user then hovers over a link, the web browser would then have to download the hover state for the link causing a short amount of time where we are left with no image while it is downloading. Although it would be a short amount of time, it doesn’t look great. If I was to use a CSS sprite, the browser would download all the states for the link as soon as the page loads. In my CSS, I would be using the same image for each state but shifting the background-position so it only shows the relevant part of the image. Then when a user hovers over the link, I would just alter the background-position again to show the hover state on my image. [code lang="css"] nav a, nav a:visited {background: url(/images/nav-bg.png) bottom repeat-x;} nav a:hover, nav a:focus {background-position: top;} [/code]

The Problem

I've found that with using sprites, if it is a complicated sprite containing many different elements, then it can be quite time consuming working out the correct background-position.

Sprite Cow – A Solution?

I came across an online tool by the name of Sprite Cow that can be used to determine the correct background-position to use for different parts of the sprite. It works by uploading your image to the site and then when you click on different parts of the image, it will automatically select all of the part of your sprite you need. It will also generate the CSS background-position you need to use and works out which part of the sprite to select based on the transparency around the image. It will even work with images that don’t have a transparent background by letting you select the colour of the background, so it instead works out which part to select based on that colour rather than the transparency. I have given it a test and it appears to work great, and will probably save me a fair bit of time in the future. What are your thoughts? @_davesellers