Forum Moderators: not2easy
Here is the issue:
In the code below, my background images for the left and right div tags are approx 800px high and if I put that into the style (height: 800px;) then the entire bg image appears. My issue occurs when the venter div content extends beyond 800px or is less then 800px. the bg images do not extend or retract, they just sit there.
Any ideas on how to get them to extract or retract based on the size of the center div tag?
Here is the code:
<html>
<head>
<style>
#mainContainer { width: 600px;background-color: #999;border: 2px solid #000;}
#left { width: 26px; float: left; background-image: url('images/leftBG.gif'); background-repeat: repeat-x;}
#center { width: 548px;float: left;text-align: center; height: 300px;}
#right { width: 26px;float: right;background-image: url('images/rightBG.gif');background-repeat: repeat-x;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="left">ff</div>
<div id="center">gf<br />fff<br />fff<br />fff<br />ffff<br />fff<br />ffff<br />ffff</div>
<div id="right">hhh</div>
</div>
</body>
</html>
Thanks a million,
C
Had to be the bearer of bad news, but background images will not re-size. Either they will be partially hidden, stop short, or can be repeated (tiled) x, y or both x & y.
Marshall
I was able to pull it off using tables instead of div tags.
so, instead of
<div id="mainContainer">
<div id="left">ff</div>
<div id="center">gf<br />fff<br />fff<br />fff<br />ffff<br />fff<br />ffff<br />ffff</div>
<div id="right">hhh</div>
</div>
I used
<div id="mainContainer">
<table width="1002" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="leftBG"></td>
<td id="content" valign="top"></td>
<td id="rightBG"></td>
</tr>
</table>
</div>
with similar style to the above. It works. :)
Hope this helps someone in the future.
Peace,
C
The only way this can be done is with the IMG tag, styled with height:100%;width:100% , and then having the content absolutely positioned over top of it.
[edited by: Xapti at 5:07 pm (utc) on Nov. 13, 2007]
