title: resize header image to fit the browser automatically
body: <p>so here I have a header image like below</p>
  
  <p><img src="https://i.stack.imgur.com/eWXph.png" alt="enter image description here"></p>
  
  <p>i planned to make stretch the header image to 100% for the monitor resolution, what's the best practice and way to achieve this? i've tried to do this:</p>
  
  <pre><code>.LippoHeader
  {
  background-image: url('../images/body/headerpng_BG.png');
  background-repeat: repeat-x;
  width: 100%;
  height: 170px;
  }
  .shadowone
  {
  width: 100%;
  position: absolute;
  left: -1px;
  top: 172px;
  display: inline-block;
  }
  .shadowtwo
  {
  width: 100%;
  position: absolute;
  left: -1px;
  top: 173px;
  display: inline-block;
  }
  .shadowthree
  {
  width: 100%;
  position: absolute;
  left: -1px;
  top: 176px;
  display: inline-block;
  }
  </code></pre>
  
  <p>it still can't stretch to 100% fit into monitor (it only stretch as the image resolution itself allow) unless i add:</p>
  
  <blockquote>
    <p>position: absolute;</p>
  </blockquote>
  
  <p>is there anyway to do this? if possible i wouldn't want to add that, i was told to not set the position to absolute, because it's a bad practice</p>
  
  <p>here's the screen capture of the header:
  <img src="https://i.stack.imgur.com/IhbGm.png" alt="enter image description here"></p>
  
  <p>also i used master page, so no body tag, only div tag, i used .ascx for my panel header, my code is </p>
  
  <pre><code>&lt;div class="LippoHeader"&gt;
    &lt;div&gt;
      &lt;img src="images/body/shadow.png" class="shadowone" /&gt;
      &lt;img src="images/body/shadow.png" class="shadowtwo" /&gt;
      &lt;img src="images/body/shadow.png" class="shadowthree" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>