ansaurus

Question

How to have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?

Answer 1

+1 A:

There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".

Chris Pebble 2009-02-26 23:33:15

Answer 2

A:

You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.

If you want to apply the watermark to each element individually, you should do something like this:

#table1, #table2, #table3, #div1, #div2, #div3 { 
    background: url(/images/shield-25.png) blue no-repeat center;
}

or maybe

table, div { 
    background: url(/images/shield-25.png) blue no-repeat center;
}

Can Berk Güder 2009-02-26 23:33:37

Answer 3

+3 A:

Unfortunately for you, this is the intended behavior. background-image and background-color are sub-properties of the background property. Since you defined a background on #table2 and #div2, you can't see "through" them to the page background anymore.

CSS3 allows you to set the opacity of the background using the rgba() expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use a filter: rule such as the following:

#table2 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
    background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}

Note how the startColorstr and endColorstr parameters have a fourth value for alpha.

Brant Bobby 2009-02-26 23:34:14

Answer 4

+1 A:

You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html

However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.

Peter Richards 2009-02-26 23:44:36

ansaurus

tags:

views:

answers:

How to have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?

related questions