I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<html>
<head>
<style type="text/css">
.everything
{
background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }
#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">
<table id="table1"><tr><td>Top</td></tr></table>
<!-- This table put a big white line over my watermark image. -->
<table id="table2"><tr><td>Middle</td></tr></table>
<table id="table3"><tr><td>Bottom</td></tr></table>
<div id="div1"><tr><td>Top</td></tr></div>
<!-- Thought maybe it was a table thing but nope, divs do it too. -->
<div id="div2"><tr><td>Middle</td></tr></div>
<div id="div3"><tr><td>Bottom</td></tr></div>
</body>
</html>
-
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".
-
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; } -
Unfortunately for you, this is the intended behavior.
background-imageandbackground-colorare sub-properties of thebackgroundproperty. Since you defined a background on#table2and#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 afilter: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
startColorstrandendColorstrparameters have a fourth value for alpha. -
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.
0 comments:
Post a Comment