CSS Background Scroll Issues

**megs1328** · 05-14-2009, 04:04 PM

I am having issues with my background. First, when the page scrolls, the body bg covers the div bg. Second, when the scroll bar appears, it bumps the body bacckground over 1px, so there is a jagged part. Here is an example: http://www.every-scene.com/coffee.php?recordID=1

I've posted the current code below. I've been playing with it a lot to find a solution and may have just messed everything up worse. Can any one help me?

CSS:

Code:

* {
	margin: 0px;
	padding: 0px;
	}
html {
	height: 100%;
}
body {
	background: #333333 url(backg.png) repeat-y fixed center top;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 85%;
	text-align:center; 
	height: 100%;
	}
#background {
	position: relative;
	background: url(backh.jpg) no-repeat fixed center top;
	height: 600px;
	z-index: 10;
	}
html>body #background { /* resets heights for non-IE 6.0 browsers */
	min-height: 100%;
	}

Basic HTML set up:

HTML Code:

<body>
   <div id="background">
       <div id="wrapper">
	   <div id="header">
 	   </div>
	   <div id="content">
 	   </div>
	   <div id="footer">
 	   </div>
       </div>
   </div>
</body>

**Medyman** · 05-14-2009, 07:23 PM

What's the reason that you're adding the background to a div instead of the body?

I think something like this should work:

HTML Code:

<body>
    <div id="wrapper">
      <div id="header">Header</div>
      <div id="content">Content</div>
      <div id="footer">Footer</div>
   </div>
</body>

Code:

html,body {
  margin:0;
  padding:0;
  background: #333333 url(backg.png) no-repeat fixed center top;
}

#wrapper {
  background-color:#FFF;
  margin:0 auto;
  width:800px; /* Width of the white area in middle */
}

Just change the width of #wrapper (and perhaps set a height or min-height, though once it has content that should fix itself). This should get you very close to the solution you're looking for if not there.

**megs1328** · 05-14-2009, 07:28 PM

For the background, I wanted to have the "rocky" part, as well as a gradient continue top to bottom. I found the best way to do this was to separate the two images, one with the rocky part and gradient on top (in the background div) and one with the gradient over a gray background (in the body). Other wise, the gradient would stop or there would be weird tiling issues. Again, this is what I ended up with, but if there is a better way, please help. Thank you.

**Medyman** · 05-14-2009, 07:38 PM

Oh, I didn't notice that there was anything in the bottom div other than that gray color. Try this CSS, it *might* work slightly better. I'm doing this straight into the browser, so it might not be perfect.

Using your original markup:

Code:

html,body {
  margin:0;
  padding:0;
  background: #333333 url(backg.png) no-repeat fixed center top;
}

#background {
  background: url(backh.jpg) no-repeat fixed center bottom;
  margin:0 auto;
  width:800px; /* Width of the white area in middle */
}

#wrapper {
  width:100%;
  background:#FFF;
}

The best way really - since you're using a fixed background - would be to combine both backgrounds and add them to the <body> tag.

Thread: CSS Background Scroll Issues

Thread Tools

Search Thread

CSS Background Scroll Issues

Bookmarks

Bookmarks

Posting Permissions