Disallow duplicate background images

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

One of the main rules of performance is to use as few bytes as possible to get the job done. Along those lines, URLs are best used just once inside of CSS. 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.

/* BAD: url duplicated multiple times */
.heart-icon {
  background: url(sprite.png) -16px 0 no-repeat;
}
.task-icon {
  background: url(sprite.png) -32px 0 no-repeat;
}
<i class="heart-icon"></i>

How do I fix this ?

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 the previous example, we would then only change the background-position for each icon.

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

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

.task-icon {
  background-position: -32px 0;
}
<i class="icons heart-icon"></i>

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started