Multiple background images: add the second image inline

[Norman]

I have a class called thead, and it does have a background image. Now, I’d like to apply another background image only to one div that is using that class. How could I do this? If I simply add an inline style=“background: url()” I get it replacing the old one. Is this possible or is this something I should forget about?

[PaulOB]

You can use multiple background images for ie9+ on the same element by using a comma separated list.

e.g.

.thead {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

More info here.

[ronpat]

If you only want to add that second image to one of the .theads, then you could add another class to the target element.

<div class="thead newclass">

.thead.newclass {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

Note that the HTML has a space between the classnames and the CSS does not.

[Norman]

Thank you so much guys.

@ronpat that excactly what I was seacrhing for! I’m gonna try it and I’ll let you know if I’ll have some problems!
Thank you a lot.