CSS: background image on background color

css background background-image background-color
mkn picture mkn · Nov 19, 2011 · Viewed 422.1k times · Source

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.

So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.

I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.

Is it therefore possible to set z-indexes for the background color and the background image?

Answer

dodger picture dodger · Nov 19, 2011

You need to use the full property name for each:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Or, you can use the background shorthand and specify it all in one line:

background: url('images/checked.png'), #6DB3F2;

Related questions

CSS3 background image transition

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1…

Read More
How to stretch the background image to fill a div

I want to set a background image to different divs, but my problems are: The size of image is fixed(60px). Varying div's size How can I stretch the background-image to fill the whole background of the div? #div2{ background-image:…

Read More
Can I set an opacity only to the background image of a div?

Let's say I have <div class="myDiv">Hi there</div> I want to put a background-image and give it an opacity of 0.5 – but I want that the text I have written will have full opacity (1). If …

Read More