Home/ Questions/Q 150227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T09:15:25+00:00

I want to create an html page with a watermark. I set the background-image

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0