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..

    Webpage Css Error.. Not Showing Anything

    How do I apply CSS style to ASCII character

    How to create a css class for category tags?

    How to make div disappear when clicking outside?

    how to resolve border-radius property issue in all versions of browsers? [duplicate]

    How to to select the last class or last of type in css

    DropDown Menu won't show for more than a second..not working.

    How to select attribute value for a selected element with wombat

    How to scroll a div inside another div?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How to I get this element to span 100% of LI? [closed]

    How can I get list of all element css attributes with jQuery?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to set same height each list items?

    CSS Grid Layout Module Level 1 - How long does it usually take from candidate recommendation to final spec?

    How to use CSS function instead of LESS function?

    how to edit a css selector in order to shorten the amount of characters used in file

    Hide/Show menu with increase/decrease of width

    How to set height for elements in a

    How to display clicked on/off SVG icon from admin panel page and display result on a different page

    Add background to first letter of a row of text. How?

    how to build a triangular slider? [closed]

    Using css modules how do I define a global class

    CSS floats - how do I keep them on one line?

    How can I know if the user tampered with the CSS or JavaScript to change the appearance of my website?

    How manage Divisions in browser resizing

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How can i return a navmenu button to previous style after clicking another button

    How to make scrollable table's header fixed using css fixed position property?

    How to make this in html and css?