...

View Full Version : How to make header images fit page



cooldude
11-22-2011, 03:59 PM
If you look at this site http://bit.ly/3HOBq the larger header image fits the page perfectly and is edge to edge. How would I get a header image to do this?

RNorskov
11-22-2011, 04:39 PM
If the header background is a solid color, make a div with a 100% width and give a background color, then place a div inside the other div, center it and fill it with the background image.

If the background isn't solid, make it the same way, but give the header a transparent fade in each side.

Solid:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#header_bg {
height: 200px;
width: 100%;
background-color: #000;
}
#header {
background-image: url(header_bg.jpg);
height: 200px;
width: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<div id="header_bg">
<div id="header">
</div>
</div>
</body>
</html>

Transparent:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#header_bg {
height: 200px;
width: 100%;
background-image: url(background.jpg);
background-repeat: repeat;
}
#header {
background-image: url(header_bg.png);
height: 200px;
width: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<div id="header_bg">
<div id="header">
</div>
</div>
</body>
</html>

Example images attached



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum