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


Tags: html,css,watermark

Problem :

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>


Solution :

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.


    CSS Howto..

    How to create a pop-up div on mouse over and stay when click

    How to properly align two elements in CSS

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to add separate style to google.visualization.DataTable without changing its own styles

    How to check if an element matches the :empty pseudo-class in pure JS?

    How to apply :hover on :after to certain div in CSS

    How to make an html section right justified and shift to a new row if the window is narrow?

    How to create a “shiny” effect like this using CSS gradients?

    How do I put 2 columns beside each other

    How do I get rid of an element's offset using CSS?

    How to rotate a div, while jQuery animates the same div

    How to Add Class to Bootstrap Thumbnails on Slider Change

    How to set select icon bigger

    How to clone the inner html of a list in query and wrap it

    How to create custom horizontal radio buttons with CSS?

    How to replace non-existing images with a default one in css?

    How stop elements from moving

    How to remove CSS triangles?

    How can I setup a border inside the div

    How to write shorter css code select child?

    How can I get these two form fields to fill the space between them [duplicate]

    How to sort properties in CSS file by groups?

    How to style a “list item > link” in jquery mobile

    Show Limited Data Using jquery

    How to add css to dynamic div Id

    How to align a horizontal list to the center in css

    slideshow banner without using flash

    php css how to change name color based on membership?

    How do I use pseudo-classes to select all children except first and last?

    How to remove space after div in my td when one div uses “relative” position?