Forum Moderators: not2easy
My attempts continue to produce odd results, need help. :(
////////////////////////////////////////////////////////////////
#bg{
width:100%;
height:100%;
z-index:1;
}
#bgtop{
width:100%;
height:63px;
}
#bgtoplft{
width:95px;
height:63px;
background-image:url(images/bgfull_01.jpg);
float:left;
}
#bgtopcntr{
width:608px;
height:63px;
background-image:url(images/bgfull_02.jpg);
}
#bgtoprt{
width:95px;
height:63px;
background-image:url(images/bgfull_03.jpg);
float:right;
}
#bgmid{
width:100%;
height:auto;
}
#bgmidlft{
width:95px;
height:auto;
background-image:url(images/bgfull_04.jpg);
background-repeat:repeat-y;
}
#bgmidcntr{
width:608px;
height:auto;
background-image:url(images/bgfull_05.jpg);
background-repeat:repeat-y;
}
#bgmidrt{
width:96px;
height:auto;
background-image:url(images/bgfull_06.jpg);
background-repeat:repeat-y;
float:right;
}
#bgbtm{
width:100%;
height:99px;
}
#bgbtmlft{
width:96px;
height:99px;
background-image:url(images/bgfull_07.jpg);
float:left;
margin-right: 0px;
background-position:left;
}
#bgbtmcntr{
width:608px;
height:99px;
background-image:url(images/bgfull_08.jpg);
}
#bgbtmrt{
width:96px;
height:99px;
background-image:url(images/bgfull_09.jpg);
float:right;
}
///////////////////////////////////////////////////////////////
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="bg.css" type="text/css" />
</head>
<body>
<div id="bg">
<div id="bgtop">
<div id="bgtoplft">a</div><div id="bgtopcntr">b</div><div id="bgtoprt">c</div>
</div>
<div id="bgmid">
<div id="bgmidlft">d</div><div id="bgmidcntr">e<BR><BR><BR><BR><BR><BR><BR><BR><BR></div><div id="bgmidrt">f</div>
</div>
<div id="bgbtm">
<div id="bgbtmlft">g</div><div id="bgbtmcntr">h</div><div id="bgbtmrt">i</div>
</div>
</div>
</body>
</html>
Okay, ignore my previous advice if you read it already. I see you have the basic layout components ready in your html.
Cut your tic-tac-toe image into three rows.
'bgtop' is your header div. Make the the top row of your image become the background for this header, no repeat.
'bgmid' is your center content. Make the center row slice of your image repeat-y for your center background.
'bgbtm' is your footer. Make the bottom row slice the background for the footer, no repeat.
The little content divs within your header, center & footer now need no background.
Good to go!
[edited by: Tourz at 10:08 pm (utc) on Jan. 11, 2008]
