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 set border to 0 in this table

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to center something I appended with js and also replace it

    How to include css in mulitple jsps?

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to define multiple CSS attributes in JQuery?

    How do I reference host element in CSS of an Angular2 component?

    How do browsers handle unrecognized at-rules?

    How to wrap text in css

    How to implement a CDN failsafe for css files?

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How to overcome Selenium CSS parent only CSS selector limitation

    css: how to surround an image with two other images vertically centered around the first one?

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    How to make a vector background image in css instead of using jpg or png

    how to align editor-label with editor-field in css

    How to generate CSS markup for non-designers

    how to use .css to add an address to the end of every .html page?

    How to make space between menu items in CSS/HTML

    How to set
  • Backgound color?
  • How do I add a hover to this css class for a tr?

    how to remove the last li::after for first line in specific width of an div

    CSS: Double-Border, how to [duplicate]

    How can I use min-width 100% and still have expanding by content?

    How do I detect a transition end without a JavaScript library?

    image carousel showing all images

    How to avoid double border from the multiple
  • How to solve Firefox 2.0 cross browser issues?

    How to center my main navigation bar on my site with css?

    select the element before the last using nth child regardless of how many elements you have? [duplicate]