What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Full screen background + div in the center


K

krneki

Member
Messages
17
Likes
1
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;
}
 
You will need to apply java script to your site coding I assume your after something like this http://hooglecraft.com/test/

and then once you have your background being as responsive like this then you will need to work on the elements and set their position to a percentage of the browser otherwise as you can see in this example when you start resizing the browser window they float wherever they are.

I have not done anything to them other than pin the logo at the top center however that method doesnt really work because once your browser window gets to a certain size it will start changing the location as it will be bigger than the display. to fix this you need to add resizing so java script is your best way to go.
 
Back
Top