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
  • #157422

    As you_ may see from the following image:

    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?


    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:


    <body background="index.jpg" class="bg">
    <div style="outer">
    <div class="centered">
      <table width="200" border="0" align="center" cellpadding="0" cellspacing="50">
          <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>
    @charset "utf-8"; {
      /* 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 */ {
        left: 50%;
        margin-left: -512px;   /* 50% */
        position: relative;
        margin:0px auto;
        text-align: center;
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.