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

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How to access regular CSS from GWT widget?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    How to create a div filling the vertical available space without overlapping the containing div?

    How to apply CSS styles to links that appear in table headers?

    How to set CSS3 transition using javascript?

    How to create a slanting border with css

    CSS: How to position an to the middle of the parent element [closed]

    How to change the css of a div using the click function on jQuery, but however twice instead of once?

    How do I center text next to a floating image using css?

    How to put banner in css?

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    how to make text with quotations justify? [closed]

    How can I make a CSS selector for a button with two classes existing in .less?

    How to make more divs appear when hovering over one div?

    CSS: How to style text in a box with a limited height

    How to prevent the background image from getting blurry

    How to put the footer at the bottom of the visible page?

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to get right sidebar up on main content on resize of flexible with page?

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    how to make dropdown menu using html & css

    How to apply a drop shadow on a triangle in CSS?

    How to prevent CSS declaration dropped errors cross browser?

    How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    How to remove css and javascript code in source code of website

    How to change size of SVG circle

    Jquery Mobile — how to Override Height and width of select box.

    html css - how to create multiple column list?