title: Full screen background + 5 banners in center
body: <p>As you may see from the following image: <a href="http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg" rel="nofollow">http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg</a></p>
  
  <p>I need to create simple HTML page with full screen background. That wouldn't be so hard if it could only be compatible with one resolution, but I really can't get it to responsive, not even partially. I've tried to use some CSS tutorials for such type of backgrounds I've managed to found, but without any good luck. On top of that, this page should be IE8+ compatible so I can't just use any CSS rules.</p>
  
  <p>There are basically 3 type of elements here:
  - background (blue lines)
  - logo (which should always be positioned on top of blue lines as it is on sample image)
  - 4 small banners with HTML links</p>
  
  <p>As of now, I merged logo on top of background so it's just one image in order to make it easier to position. Dimensions of background image are 1920 x 1080 px.</p>
  
  <p>Here's my code, but there are probably better solutions:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Intro&lt;/title&gt;
  &lt;link href="index.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;body background="index.jpg" class="bg"&gt;
  &lt;div style="outer"&gt;
  &lt;div class="centered"&gt;
    &lt;table width="200" border="0" align="center" cellpadding="0" cellspacing="50"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;img src="icon3.png" width="168" height="128" alt=""/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="icon6.png" width="128" height="128" alt=""/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="icon4.png" width="168" height="128" alt=""/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="icon9.png" width="128" height="128" alt=""/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="icon5.png" width="128" height="128" alt=""/&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.css:</p>
  
  <pre><code>@charset "utf-8";
  img.bg {
    /* Set rules to fill background */
    min-height: 768px;
    min-width: 1024px;
  
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
  
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
  }
  
  @media screen and (max-width: 1920px) { /* Specific to this particular image */
    img.bg {
      left: 50%;
      margin-left: -512px;   /* 50% */
    }
  }
  
  .outer{
      position: relative;
  }
  
  
  .centered{
      position:absolute;
      top:50%;
      height:10em;
      margin:0px auto;
      left:0;
      right:0;
      text-align: center;
      display:block;
  }
  </code></pre>