By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS image sprites

CSS sprites are multiple images that have been combined into a single image file.

Edited: 2016-01-03 03:46

CSS sprites or CSS image sprites are single image files containing multiple images that are accessed trough the use of CSS positioning. They are a common method to lower the HTTP requests required to load a page, and they are therefor useful for optimizing your website's speed.

There are two benefits to using CSS image sprites, one of them is lowering the number of HTTP requests required to otherwise load a page. Another benefit is the apparent instantaneous change of image on :hover states. The good affects are improved further by using Data URIs.

How to make CSS Sprites

image of borders

Simply carefully note the dimensions of each image, and then try to combine them, as has been done in the image to the left. When you got your image ready, you will need to place the image using the CSS background-position Property.

image of borders

The two images contain graphic-heavy border images which has been combined into two images. One containing the horizontal borders, and one the vertical. The border-layout can be seen in action here.

If you imagine a two-dimensional coordinate system, the trick is to use the positioning capabilities of the background properties to pick the desired image sprite from the image file. I.e.:

div {
 width: 27px;
 height: 48px;
 background: url("/i/BG_Spirits2.png") no-repeat 0px -24px;

The above corresponds to one of the border-corner images in the example linked ealier, and would result in:

Common problems with CSS sprites

One of the most common problems is that the image is simply not showing up, and this is often due to one of the following:

  1. The path to the image is not correct. Can be checked by copying the path, and pasting it into the browser. If a relative URL was used, paste it after the domain name. Note. It is recommended to use root relative URLs rather than relative URLs. See also: Absolute and relative paths
  2. Forgetting to give elements a fixed height when using CSS sprites on empty elements. This is often the case when sprites are used for layout, and can cause elements to collapse and become invisible on the page. The symptom is that your image does not show up, even after correctly linking it in one of the CSS background properties.
  3. Collapsing inline elements. Can be solved with display:block; and a fixed height.
  4. If an image is not showing up, the cause can also be overlapping use of double quotes or single quotes in inline style declarations. In HTML, attribute values are usually encapsulated in either double quotes or single quotes, so when a CSS property is also using quotation marks, it will break if you use the same marks that you use to encapsulate your HTML properties.

Another problem may occur when images and content gets shared on social media, and the CSS sprites are picked up as one big image, rather than individual image sprites. This can make it problematic to save your website logo in a sprite together with other graphics used on your site.

Using CSS sprites can also be more complicated than using single images, this is because you can not always just place the images next to each other in the same file. But this is mainly an issue in situations where you have images that needs to be repeated both horizontally and vertically. It can still be done, but you will need to split them into two files.