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.

<style type="text/css">

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

#table2 { background-color: white }
#div2 { background-color: white }
<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>


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 add space between CSS table rows?

    How do I fix a Wordpress meta box that's blown out by it's content?

    How to understand other people's CSS architectures?

    How to add hover effect to img placed in parent container

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    CSS how to vertically align text within a pseudo element

    How to divide the content column in to two using css

    How can I specify a *.css file in an ASP.NET UserControl?

    How to find all elements with a particular CSS style, without a JS library?

    How to view Google Maps in “print” mode?

    how would i get the headline to fade in and move up very slightly on page load with css

    How can I click a specific li without an id or class?

    How to align nav drop down menu in css?

    how to create two columns with div and CSS

    Large gap between text, how to fix?

    How to get page-header and nav-pills to appear on the same line

    How to print text between css selectors in golang using html package?

    How do I fix this div overflow?

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How do I align something in a in the top-left corner - without aligning everything?

    How to size this text with css?

    How to set a dynamic CSS value with JavaScript

    How to add font to web application .css file

    jQuery how to click a pseudo class element :after [duplicate]

    How to edit HTML with CSS? [closed]

    How to add CSS Transition for button sliding

    How to place an icon on the first line and text on the second line?

    How to add CSS class dynamically to html element

    How can I stop mobile Safari from pausing before beginning a transition

    How to make sidebar horizontal for xs devices