Forums

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:


* {
	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


<body id=\"main\">
    <div id=\"hd\">
      <img src=\"images/banner.png\" alt=\"\" />
    </div>
    <div id=\"bd\">
      <!-- user information -->
      <div id=\"user-box\">
        <img class=\"left\" src=\"images/user-box-left.jpg\" alt=\"\" />
        <img class=\"right\" src=\"images/user-box-right.jpg\" alt=\"\" />
        <div id=\"user\">
          sample username
        </div>
      </div>
      
      
      <!-- timeline -->
      <div id=\"timeline\">
        <img class=\"left\" src=\"images/timeline-start.jpg\" alt=\"\" />
        <img class=\"right\" src=\"images/timeline-end.jpg\" alt=\"\" />
      </div>
    </div>
    <div id=\"ft\">
      
    </div>
  </body>

TheDoc

Can't explain too much without having a url and seeing which files are which, but if "hd-bg.jpg" is the blue/white gradient, then add the bold part:

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

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.

TheDoc

If you post the url I can have a closer look at it when I get home.

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

TheDoc

Make this your body background:

body {
	background: url(../images/hd-bg.jpg) repeat-x #975723;
}

Remove the background style from #hd.

treehouse : what would you like to learn today?

Forums

DIV Background Pattern stops repeating.