DIV Background Pattern stops repeating.

[noahhendrix]

I have a page I am working that stretches horizontally (weird, huh?) and I want the header to dynamically expand as well. I have the logo setup to scroll with the page using a fixed position. I am going to upload an image to describe the issue better than I possibly could in words. Thanks in advance for any help!

[attachment=0]Picture 1.png[/attachment]

In the picture notice how arrow at the bottom stretches further than the width of the page? Well I want the background of my header to do the same. Any ideas?

Here is the CSS Code:

Code:

* {
margin: 0;
padding: 0;
}
body {
background-color: #975723;
}

#hd {
background-image: url(../images/hd-bg.jpg);
height: 280px;
overflow: visible;
width: 100%;
}
#hd img {
position: fixed;
}

#bd {

}
#user-box {
background: transparent url(../images/user-box-middle.jpg) repeat;
max-width: 300px;
overflow: auto;
}
#user-box .left {
float: left;
}
#user-box .right {
float: right;
}
#user-box #user {
padding: 18px;
}
#timeline {
background: transparent url(../images/timeline-middle.jpg) repeat-x;
height: 89px;
margin-top: 50px;
width: 2000px;
}
#timeline .left {
float: left;
}
#timeline .right {
float: right;
}

and the HTML

Code:

sample username

[noahhendrix]

Oops I had that in there at one time, it doesn’t help either way though. I am not sure but inspecting with FireBug shows that div just is the width of the veiwport.

Thank you though, you did assume correctly.

[noahhendrix]

Thanks very much!

I was developing locally so I had to upload to my server, when the sub-domain propagates it’ll be http://www.bugy.collegeaintcheap.com

[Author]

Posts