title: Image not visible on IE8 or older
body: <p>I have an image that scales accordingly to the window size. It works well on IE9+, Chrome, Safari and Firefox but it doesn't appear on IE8 or older.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="home_main"&gt;
      &lt;img src="main_blur.jpg"/&gt;
      &lt;div class="text_and_button"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt; more text&lt;/p&gt;
          &lt;a href="Contacts.php" class="contact_button"&gt;Button text&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>.home_main {
      position: relative;
      width: 100%;
      padding-bottom: 31%;
      float: left;
      height: 0;
  }
  
  .home_main img {
      min-height: 300px;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
  }
  
  .home_main p {
      padding: 30px 50px 20px 50px;
      color: #FFFFFF;
      background: rgb(66,91,122);
      background: rgba(66,91,122,.6);
      font-size: 54px;
      font-family: BebasNeue;
      font-weight: normal;
  }
  </code></pre>
  
  <p>Also the paragraphs should have a colored background and the menu on the top of the page don't appear.</p>
  
  <p>You can check the problem on <a href="http://www.mediata-sa.pt" rel="nofollow">www.mediata-sa.pt</a>.</p>
  
  <p>How can I solve this problem?</p>