Forum Moderators: not2easy
Can anyone help me?
im working on a design which i cant get right. I cant figure out how to achieve what i want.
Basically i have a background image which is defined in the background-middle class. This is set as a background and sits behind the main content class. The main content class has a width of 758px.
This is what i cant acheive... to have the background image rezise on the left. It currently rezises from the right when the width is set to auto. I want both sides of the background to resize when the browser window is minimized.
here is a link to a site to show you what i have already
here is my html
<div class="background-middle">
<div class="maincontent">
<div class="homeimage">
<img src="../images/home_image.jpg" alt="Gaurdian Personal Alarm System" /></div>
<div class="pagecontent"><!-- TemplateBeginEditable name="body" -->
body
<!-- TemplateEndEditable --></div>
<br clear="all" />
</div>
</div>
An my css for maincontent and background middle:
.background-middle {
position: absolute;
width: auto;
height:auto;
margin-top:194px;
background-image:url(images/page_bg_middle.gif);
background-repeat: repeat-y;
}
.maincontent {
width:758px;
margin-left:92px;
}
Any ideas/advice would be greatly appriciated
[edited by: jatar_k at 2:47 pm (utc) on Sep. 4, 2007]
[edit reason] no urls thanks [/edit]
I am assuming you want the background to have equal spacing on the left and right of your <div class="maincontent">. Based on this assumption, I suggest the following changes.
.background-middle {
width: 942px;
height:100%;
margin:194px auto 0 auto;
padding: 0 92px 0 92px;
text-align: left; /* IE hack */
background-image:url(images/page_bg_middle.gif);
background-repeat: repeat-y;
}
.maincontent {
width:758px;
margin: 0 auto;
}
This CSS will center the should center the .background-middle on the screen and center the .maincontent within the background providing 92px of spacing on either side. again, this is if I assumed correctly as to what you want to achieve.
Marshall