• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

How can I apply two background images in CSS

Hi all,

I am trying to do something in CSS that is proving to be more trouble than I thought!
I have an image displayed within a DIV using CSS.
What I want to do is display a particular image image, then overlay with a second one to display a status.

I was hoping that something like this would do it:
.myicon.Unit1 { background-image:url(../Img/Unit1.png); }
.myicon.Unit2 { background-image:url(../Img/Unit2.png); }

.myicon.IN { background-image:url(../ImgIN.png); }
.myicon.CR { background-image:url(../ImgCR.png); }
.myicon.MA { background-image:url(../ImgMA.png); }
.myicon.MI { background-image:url(../ImgMI.png); }
.myicon.WA { background-image:url(../ImgWA.png); }
.myicon.CA { background-image:url(../ImgCA.png); }
.myicon.UN { background-image:url(../ImgUN.png); }

Open in new window


Unfortunately as CSS styles essentially replace one another, this does not work and I need to do this:

.myicon.Unit1.OK { background-image:url(../Img/Unit1.png),url(../Img/OK.png); }
.myicon.Unit1.IN { background-image:url(../Img/Unit1.png),url(../Img/IN.png); }
.myicon.Unit1.CR { background-image:url(../Img/Unit1.png),url(../Img/CR.png); }
.myicon.Unit1.MA { background-image:url(../Img/Unit1.png),url(../Img/MA.png); }
.myicon.Unit1.MI { background-image:url(../Img/Unit1.png),url(../Img/MI.png); }
.myicon.Unit1.WA { background-image:url(../Img/Unit1.png),url(../Img/WA.png); }
.myicon.Unit1.CA { background-image:url(../Img/Unit1.png),url(../Img/CA.png); }
.myicon.Unit1.UN { background-image:url(../Img/Unit1.png),url(../Img/UN.png); }

.myicon.Unit2.OK { background-image:url(../Img/Unit2.png),url(../ImgOK.png); }
.myicon.Unit2.IN { background-image:url(../Img/Unit2.png),url(../ImgIN.png); }
.myicon.Unit2.CR { background-image:url(../Img/Unit2.png),url(../ImgCR.png); }
.myicon.Unit2.MA { background-image:url(../Img/Unit2.png),url(../ImgMA.png); }
.myicon.Unit2.MI { background-image:url(../Img/Unit2.png),url(../ImgMI.png); }
.myicon.Unit2.WA { background-image:url(../Img/Unit2.png),url(../ImgWA.png); }
.myicon.Unit2.CA { background-image:url(../Img/Unit2.png),url(../ImgCA.png); }
.myicon.Unit2.UN { background-image:url(../Img/Unit2.png),url(../ImgUN.png); }

Open in new window


Now, as I have potentially a LOT of different unit images, the CSS will become huge!

Is there any better, and more concise way to do this, or is this the only option?

Any help would be gratefully appreciated.

Many thanks,

James
0
James Atkin
Asked:
James Atkin
2 Solutions
 
Pallavi GodseSr. Digital Marketing ExecutiveCommented:
CSS3 helps you to add multiple background images for an element with the background-image property.

The following example has two background images:

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

Open in new window

0
 
Julian HansenCommented:
Here is a sample that describes how to overlay two images in the same space.

The mechanisms of these methods are discussed in this article
https://www.experts-exchange.com/articles/28823/3-Methods-for-creating-image-overlays-in-HTML-using-CSS-and-PHP-GD2.html
1
 
Kim WalkerWeb Programmer/TechnicianCommented:
I don't know of a way to assign the common background images separately from the unique ones. I can see how tedious it might be to assign the common images to each individual element. The only alternative I can think of is to have separate overlaying divs and assigning them separate background images. But that may be just as tedious. You might be able to simplify it by using a ::before selector to insert the common background images. Something along these lines:
.myicon.Unit1::before, .myicon.Unit2::before {
	background-image:url(../Img/Unit1.png);content:'';width:100px;height:100px;position:absolute;left:0;top:0;
}
.myicon.Unit2 { background-image:url(../Img/Unit2.png); }

.myicon.IN, .myicon.CR, .myicon.MA, .myicon.MI, .myicon.WA, .myicon.CA, .myicon.UN {
	background-image:url(../ImgIN.png);position:relative;
}
.myicon.CR { background-image:url(../ImgCR.png); }
.myicon.MA { background-image:url(../ImgMA.png); }
.myicon.MI { background-image:url(../ImgMI.png); }
.myicon.WA { background-image:url(../ImgWA.png); }
.myicon.CA { background-image:url(../ImgCA.png); }
.myicon.UN { background-image:url(../ImgUN.png); }

Open in new window

I did not have the opportunity to test this.
0
 
James AtkinSenior Principle Software EngineerAuthor Commented:
Hi all,
Nesting the DIVs works great for my case:
[code]<div id=theID>
   <div class='myicon WA'></div>
   <div class='myicon Unit1'></div>
</div>[/code]
Thanks a lot for all the feedback.
James
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now