Sorry if the post title is confusing but what I am wanting to know is if it is good practice to use a header 100% accross the page a fixed container underneath and then a 100% footer. I know it sounds bad practice and I think it is but would like an experts view on this. You see the problem is that the client wants a header and footer bg that stretches right across the page but a large image of them in the centre of the page but I can only see a traditional solution as repating the header image as a body bg but if I did this the main image would have to be included in this wouldnt it.
The trouble also is is that they want a different large bg image on each page - they are a band you see. My initial thought for the main large centre image was to give each page a different body style for example
body#home {
background:url(…/images/some-image.jpg) top center no-repeat #000000;
}
So I would like some advice or opinions on this if possible. I hope it doesn’t read too confusing.
I don’t see how setting width:100%; to a header is bad practice. It’s perfectly normal. Why do you think it’s a bad practice.
About your background problem, it’s a bit confusing. Do you have this page online?
FYI: you can set background to html tag as well, so you can get 2 backgrounds: 1 for html and 1 for body.
html {background:url(../images/html-image.jpg) top center no-repeat #000000;}
If you mean a fixed positioned header and footer then you can do something like this but is only really suitable for fixed height layouts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {/* for demo only - use a proper reset instead*/
margin:0;
padding:0
}
html, body { height:100% }
h1 { font-size:16px; }
#header, #footer {
height:40px;
width:100%;
position:fixed;
left:0;
z-index:99;
background:#ccc;
border-bottom:5px solid #000;
}
#header { top:0 }
#footer {
bottom:0;
border:none;
border-top:5px solid #000
}
#header h1,#footer p{text-align:center;margin:0}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table;
height: 100%;
width:100%;
z-index:1;
}
#row { display:table-row; }
#content {
display:table-cell;
width: 960px;
text-align: left;
margin-left:auto;
margin-right:auto;
z-index: 3;
vertical-align:middle;
padding:35px 0;
}
#content .innercontent {
background:red;
width:958px;
border:1px solid #000;
margin:auto;
overflow:auto;
}
.innercontent p {
padding:10px;
margin:0 0 1em
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
* html #header,
* html #footer{
position:absolute;
}
* html #footer {
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
position:absolute;
left:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + 0 : document.body.scrollLeft + 0);
}
* html #header {
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + 0 : document.body.scrollLeft + 0);
position:absolute;
}
* html {/* stop jitter by adding a 1px transparent gif to background of html*/
background-image: url(image.jpg);
}
#container{top:50%;display:block;height:auto;}
#row{top:-50%;position:relative;zoom:1.0}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="container">
<div id="row">
<div id="content">
<div class="innercontent">
<p>Start Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers</p>
<p>Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers</p>
<p>Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers</p>
<p>Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers</p>
<p>Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
IE6 and 7 need the extra code in the conditional comments and IE7 slides off the screen at smaller window sizes.