im trying to develop a web site with the same functionality as webdesignerforum.co.uk and www.newyorkjets.com

 

as you notice that if you resize the resolution to 1024x768 the content fits lovely slap bang in the middle. now if you increase the resolution to whatever the page and background elemnets stay in the middle. this looks like it has been done using pixels rather than %

 

How can i do this with my background image attached. been racking my brains over this and cant get my head around it, but im sure its simple.

<body>
 <div id="wrapper">
 </div>
</body>

 

#wrapper {
 width: 978px; /*or whatever */
 margin: 0 auto;
}

where do i place my background image? within the body tag or the wrapper tag as you have shown above?

Body tag.

so i have this in my css

 

body{
background-image: url('images/background.png');
}

#wrapper { 
 width: 978px; /*or whatever */ 
 height: 200px;
 margin: 0 auto;
 border: solid 1px black;
}

 

 

and i have this in my .php

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper"></div>

</body>

</html>

 

It renders fine in my larger resolution of 1600 x 900 but when i view in smaller resolution the wrapper is shifting and overlapping onto the left side of my packground as you can see in attachment. why is this?

Edited March 6, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

should i apply to the body tag

 

background-position: top center;

Background-position.