Reply To: Full screen background + 4 banners in center - CSS-Tricks

November 30, 2013 at 7:50 am #157438

Participant

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.

Here’s my code, but there are probably better solutions:

Intro

<body>
<body background="index.jpg" class="bg">
<div style="outer">
<div class="centered">
  <table width="200" border="0" align="center" cellpadding="0" cellspacing="50">
    <tr>
      <td><img src="icon3.png" width="168" height="128" alt=""/></td>
      <td><img src="icon6.png" width="128" height="128" alt=""/></td>
      <td><img src="icon4.png" width="168" height="128" alt=""/></td>
      <td><img src="icon9.png" width="128" height="128" alt=""/></td>
      <td><img src="icon5.png" width="128" height="128" alt=""/></td>
    </tr>
  </table>
</div>
</div>
</body>
</html>


@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;
}