可以设置背景图片CSS的背景颜色吗？

Question

bit of a strange request but I was wondering if it is possible to set the background colour of a background image applied to a div? I know you can set the background colour of an <img /> .

I've tried:

background: #FFFFFF url(image.png) no-repeat bottom center;

Which just changes the colour of the div that the image is applied to.

Thanks for any help at all

*edit, added image to better explain issue:

The last pod in this right hand nav has the background image/shadow applied, i would ideally like to give this shadow a background color so that it blends in with the background of the page rather than being white like the containing div.

Answer 1

Use

background: #FFFFFF url(image.png) no-repeat bottom center;

it will fill up the background of the element (div, ...) with the image.png and fill the rest with the color #FFFFFF

Answer 2

If those are all a single image (it's usually considered bad practice to have content text in images, btw), then I'd recommend using your image editor to make the space between the blocks transparent (don't forget to include the shadows, so they have alpha transparency over the correct color, instead of over white). That will allow the HTML element's background color to show through.

That said, I would personally make those blocks into regular text and HTML blocks (so the only images are the decoration images on the right hand side of each), which you can easily add the shadow to with box-shadow .

The box-shadow property is, by nature, transparent other than where the shadow itself is. This means that its "background" will always be what is underneath it (in simple cases, this would be the background of the containing element, though it can also be text or images, if the element with box-shadow is on top of it).

Check out my jsFiddle to see what I'm talking about (it's a quick one, so it doesn't look exactly like the effect you're going for, but that effect is possible with a little creativity): http://jsfiddle.net/DXrk6/1/