Csslint: Background image was used multiple times

Question

I have this in my css:

@media screen and (max-width:1200px) {
#cssmenu {
  background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
  width: 100%;
}
}    

@media screen and (max-width:970px) {
#cssmenu {
  background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
  width: 150px;
}
}

I get an error with csslint task:

Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)

Is there a way to declare these images so that I don't get this error?

Edit (another case):

.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
 {
 background:url('/public/system/assets/img/add.png') no-repeat right 17px,  url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
 }

And I get this error: [L651:C1] Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d uplicate-background-images)

Answer 1

One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.

To recap, change it to:

@media screen and (max-width:1200px) {
  #cssmenu {
    background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
    width: 100%;
  }
}    

@media screen and (max-width:970px) {
  #cssmenu {
    width: 150px;
  }
}

---

As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.

Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle

Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:

html:

<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>

css:

.tiles {
  background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;             
}

.linkmycars, .addcars {
    width: 100%;
    height: 100%;  
}

.linkmycars {
  background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}

.addcars {
  background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}  

Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.

Hope it helped.