High This Hint is very important, and definitely warrants attention. Issue This Hint represents an error or problem that needs to be fixed.

CSS contains duplicate background images

This means that the URL in question is a CSS file that contains multiple selectors that use the same background image.

Why is this important?

One of the main rules of performance is to use as few bytes as possible to get the job done. Along those lines, image URLs are best used just once inside of CSS. If the background image is repeated in both classes, that's extra bytes you don't need and also increases the chances that you'll forget to change one should the filename change. 

What does the Hint check?

This Hint will trigger for any internal or external CSS URL which contains multiple uses of the same background image URL.

Examples that trigger this Hint:

The Hint would trigger for any style sheet that contains:

.badge-icon {
background: url(image.png) -16px 0 no-repeat;
}

.circle-icon {
background: url(image.png) -32px 0 no-repeat;
}

How do you resolve this issue?

If you have more than one class that needs to use the same background image, then it's better to have one class that uses the URL and simply apply that class to the various elements where it is needed. An alternative is to define one class that has the URL and be sure to apply that class to the HTML elements where the other classes are used. For example:

.icons {
background: url(image.png) no-repeat;
}

.badge-icon {
background-position: -16px 0;
}

.circle-icon {
background-position: -32px 0;
}

Ready to try Sitebulb?
Start your free 14 day trial now

Start Free Trial