title: How to Layout a Watermark Image that is transparent along with a banner image and content div?
body: <p><img src="https://i.stack.imgur.com/nQ2Du.jpg" alt="watermark"></p>
  
  <p>I have been asked to create a layout that incorporates this watermark.  It must be placed in such a way that the left point is in the left sidebar DIV, the top portion is transparent to the banner image, and the bottom portion is a background image to the content DIV.  </p>
  
  <p>I tried absolute positioning in CSS per my jsFiddle <a href="http://jsfiddle.net/rUg55/" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code> &lt;!doctype html&gt;
   &lt;div id="all"&gt;
   &lt;div id=leftside&gt;
   &lt;/div&gt;&lt;!-- leftside --&gt;
   &lt;div id="banner"&gt;       
   &lt;/div&gt; &lt;!-- banner --&gt;
   &lt;div id="rightside"&gt;
   &lt;div id="rightinner"&gt;
     &lt;h3&gt;My Account&lt;/h3&gt;
     &lt;input type="text" id="Login"/&gt;
     &lt;input name="Go" type="button" id="btnLogin" value="Go"/&gt;&lt;br/&gt;
   &lt;/div&gt;
   &lt;!-- rightinner --&gt;
   &lt;/div&gt;&lt;!-- rightside --&gt;
   &lt;div id="nav"&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;menu item1&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Strategy &amp;amp; Performance&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Documents&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Research &amp;amp; Insights&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- nav --&gt;
    &lt;div id="content"&gt;
  
    &lt;/div&gt;&lt;!-- content --&gt;
    &lt;div id="footer"&gt;
     &lt;div id="leftfooter"&gt;
       &amp;copy; my copyright
     &lt;/div&gt;&lt;!-- leftfooter --&gt;
     &lt;div id="rightfooter"&gt;
       &lt;a href="#"&gt;Privacy Notice&lt;/a&gt;
     &lt;/div&gt;&lt;!
    &lt;/div&gt;
  &lt;!-- footer --&gt;
  &lt;/div&gt; 
  &lt;!-- all --&gt;
  </code></pre>
  
  <p>However, absolute positioning doesn't allow me to properly fit the pieces of the watermark together tightly enough.  <img src="https://i.stack.imgur.com/87ceC.jpg" alt="intended banner image here">  This is an example slice where the watermark is sliced as part of the header image.  </p>
  
  <p>I've attached a mockup of what the completed home page should look like:
  <img src="https://i.stack.imgur.com/II62a.jpg" alt="mockup">
  What would be the most CSS friendly and responsive approach to ensure that the watermark DIV is transparent over the top of the background color and can be seen in the banner, left sidebar and content DIVs?</p>
  
  <p>UPDATE 4/1:  I've modified the CSS <a href="http://jsfiddle.net/rUg55/2/" rel="nofollow noreferrer">here</a> as follows:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  body{
  background-color: #003a63;
  font-family: Calibri, Verdana, sans-serif;
  font-size: 12pt;
  width: 100%
  }
  
  html{
  width:100%;
  }
  
  h3{
  color: white;
  }
  #all {
  width: 1024px;
  }
  #banner {
  background-image: url(images/banner.png);
  background-repeat: no-repeat;
  height: 367px;
  width: 815px;
  position: absolute;
  left: 232px;
  top: 0px;
  z-index: 999;
  }
  
  #watermarkCont{
  background-color: #003a63;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 25;
  }
  
  #watermark{
  background-image: url(images/ghwatermark.png);
  width: 576px;
  height: 517px;
  position: absolute;
  left: 50%;
  margin-left: -200px;
  z-index: 25;
  }
  #content {
  background-image: url(../images/bgcontent.png);
  background-repeat: no-repeat;
  height: 454px;
  width: 827px;
  position: absolute;
  left: 228px;
  top: 412px;
  background-color: #FFF;
  z-index: 1;
  }
  #leftside {
  height: 895px;
  width: 220px;
  position: absolute;
  z-index: 1;
  }
  #rightside {
  background-color: light-gray;
  height: 957px;
  width: 211px;
  position: absolute;
  left: 1050px;
  top: 0px;
  z-index: -25;
  }
  #nav {
  background-color: #c7940d;
  list-style-type: none;
  font: Calibri;
  font-size: 12pt;
  font-weight: bold;
  position: absolute;
  left: 231px;
  top: 368px;
  width: 822px;
  height: 42px;
  margin: 0;
  padding: 0;
  z-index: 999;
  }
  #nav ul{
  margin:0;
  padding:0;
  }
  
  #nav ul li{
  display: inline;
  font-weight: bold;
  color: #FFF;
  }
  #rightinner {
  background-color: #003a63;
  height: 130px;
  width: 220px;
  padding: 1px 1px 1px 1px;
  }
  #footer {
  height: 105px;
  wiedth: 833px;
  position: absolute;
  left: 227px;
  top: 864px;
  width: 825px;
  color: #003a63;
  background-image: url(images/footerbg.png);
  }
  #rightfooter {
  float: right;
  }
  #leftfooter {
  float: left;
  width: 225px;
  }
  </code></pre>
  
  <p>This is closer to what I need.  However, I'm not sure how to adjust the z-index values for the elemetns in question to make it look like the mockup.  Can anyone provide some suggested values?  My understanding is that the higher the z-index value, the higher the image is in the "stack".  Is that correct?</p>