title: How to have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?
body: <p>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.</p>
  
  <p>It seems reasonable to have a visible watermark on a page with elements having different background colors.  </p>
  
  <p>How do I get the effect I want using standard html/css?</p>
  
  <p>Here's some sample code that shows the problem.  Note the white block obscuring my watermark image.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  .everything
  { 
      background: url(/images/shield-25.png) blue no-repeat center;
  }
  table, div{ width: 100% }
  
  #table2 { background-color: white }
  #div2 { background-color: white }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body class="everything"&gt;
  
    &lt;table id="table1"&gt;&lt;tr&gt;&lt;td&gt;Top&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
    &lt;!-- This table put a big white line over my watermark image. --&gt;
    &lt;table id="table2"&gt;&lt;tr&gt;&lt;td&gt;Middle&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
    &lt;table id="table3"&gt;&lt;tr&gt;&lt;td&gt;Bottom&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
    &lt;div id="div1"&gt;&lt;tr&gt;&lt;td&gt;Top&lt;/td&gt;&lt;/tr&gt;&lt;/div&gt;
    &lt;!-- Thought maybe it was a table thing but nope, divs do it too. --&gt;
    &lt;div id="div2"&gt;&lt;tr&gt;&lt;td&gt;Middle&lt;/td&gt;&lt;/tr&gt;&lt;/div&gt;
    &lt;div id="div3"&gt;&lt;tr&gt;&lt;td&gt;Bottom&lt;/td&gt;&lt;/tr&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>