...

View Full Version : Tiling left and right background fixed center - header



iwebdesign
06-23-2010, 07:12 PM
Trying to have left and right repeating background images and a fixed size center header image. Here's the relevent CSS. Any help greatly appreciated. (left bg is on top of center, and right is below...)


#container {
height:100%;
min-height:100%;
height:auto;
width:100%;
margin-left:auto;
margin-right:auto;
}


#headercontainer {
height:163px;
width:100%;
margin:0;
}


#headerleft {
height:163px;
width:30%;
background-image: url('images/left_top_bg.jpg');
float:left;
background-repeat: repeat-x;
}


#header {
height:163px;
width:990px;
background-image: url('images/rv_park_quartzsite_header.jpg');
background-repeat: no-repeat;
margin-left:auto;
margin-right:auto;
}

#headerright{
height:163px;
width:30%;
background-image: url('images/right_top_bg.jpg');
background-repeat: repeat-x;
float:left;
display:inline;
}[

html header portion:


<div id="headercontainer"><div id="headerleft"> </div><div id="header"> </div><div id="headerright"> </div></div>

robin9000
06-23-2010, 09:11 PM
I think the below code might help you. It's code I used to design my banner with. You might have to modify it a bit but I think this is what you are looking for.

#A1000{
background-image:url(../banner/3.jpg);
background-repeat:repeat-x;
height:90px;
margin:0px;
padding:0px;
}

#A1001{
background-image:url(../banner/1.jpg);
background-repeat:no-repeat;
height:90px;
width:310px;
float:left;
margin:0px;}

#A1002{
background-image:url(../banner/2.jpg);
background-repeat:no-repeat;
height:90px;
width:300px;
float:right;
margin:0px;
padding:0px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum