Find us at BrightonSEO 25/26 April - STAND 18! Fill your swag bag!

Dealing with Front-end issues?

Crawl your website with Sitebulb for 300+ tech SEO checks

Try for Free

This Hint has been deprecated, and we no longer consider it best practice. In order to get the most accurate audit results from Sitebulb, please ensure you update to the latest version.

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;
}

Sitebulb Desktop

Find, fix and communicate technical issues with easy visuals, in-depth insights, & prioritized recommendations across 300+ SEO issues.

  • Ideal for SEO professionals, consultants & marketing agencies.

Sitebulb Cloud

Get all the capability of Sitebulb Desktop, accessible via your web browser. Crawl at scale without project, crawl credit, or machine limits.

  • Perfect for collaboration, remote teams & extreme scale.