PDA

View Full Version : Getting Background to Span Div Width and not Page Width



Serialcode
Feb 8th, 2010, 10:40 AM
Hello,

I have done a few searches of the forums to see if I could find a related thread. No luck :(. I do apologize first off if I missed the thread that deals with this question, because I'm sure it's out there.

Anyway, I am working with a repeating background. I have it setup so it repeats nicely but it will stop at right side window edge.

In other worse, if I have content that is larger width-wise than the size of the window (therefore requiring a user to scroll right), the repeating background will not show up when a user scrolls.

I have attached a small video demonstrating my problem. I have also included my CSS code.


If anyone knows a simple solution to this issue, I would greatly appreciate any suggestions or pointers. Also, let me know if I left out some important info that I should have included.

Thanks so much!


* {
margin:0;
padding:0;
}


body {
font-family: "Trebuchet MS", "Tahoma", "Arial" sans-seris;
color: gray;

}


#htop {
background-image: url(http://www.countylinegaming.com/images/hbg_top.png);
height: 8px;
position: relative;
background-repeat: repeat-x;
}


#hmain {
position: relative;
text-align: center;
text-overflow: clip;
word-wrap: break-word;
height: 102px;
background-image: url(http://www.countylinegaming.com/images/hbg_main.png);
background-repeat: repeat-x;
}


#htitle {
margin-top: -8px;
width: 505px;
margin-left: -253px;
left: 50%;
position: absolute;
}


#hmenu {
top: 53px;
width: 720px;
margin-left: -359px;
left: 50%;
position: relative;
}


#hbottom {
margin-top: -12px;
background-image: url(http://www.countylinegaming.com/images/hbg_bottom.png);
height: 8px;
position: relative;
background-repeat: repeat-x;
}



VIDEO: http://www.countylinegaming.com/slightlyamiss/rptbg.mov

Excavator
Feb 8th, 2010, 11:03 AM
Hello Serialcode,
If you want that image to continue on as wide as the body of the document is going when scrolled, then that's where it should be.
Like this -

body {
background: url(http://www.countylinegaming.com/images/hbg_main.png) repeat-x top;
font-family: "Trebuchet MS", "Tahoma", "Arial" sans-seris;
color: gray;

}