Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Oct 2013
    Posts
    14
    Member #
    37430

    Full screen background + div in the center

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

    I need to create simple intro 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 be really responsive. On top of that, this page should be IE8+ compatible so I can't just use any CSS rules.

    There are basically 3 type of elements here:
    - background (blue lines) with dimensions 1920 x 1080, but I can adjust that in Photoshop since I have sources,
    - logo (which should always be positioned on top of blue lines as it is on sample image, but as of now I just merged logo on top of background so it's just one image in order to make easier layout, it actually can stay that way) ,
    - 5 small banners with HTML links (nice hover effect would be more than welcomed).

    Here's my code with more or less trial & error method, so there are probably better solutions:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Intro</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    </head>
    
    <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;
    }

  2.  

  3. #2
    Junior Member Zyranium's Avatar
    Join Date
    Dec 2013
    Location
    Earth
    Posts
    14
    Member #
    37871
    <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>
    Your widths and heights are wrong. Remove the quotations, and put "px" after 128/168. That's all I got to say.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com