Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Full screen background + 4 banners in center

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 29, 2013 at 7:01 pm #157422
    memfaction
    Participant

    As you_ may see from the following image: http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg

    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 c_an’t just use any CSS rules.

    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

    Could you please help me out with this?

    November 30, 2013 at 7:50 am #157438
    memfaction
    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;
}
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.