ansaurus

Question

CSS: Setting a background gradient to width 100% fine unless page scrolls.

Answer 1

+1 A:

This is intended behaviour for position: absolute, its coordinates are relative to the viewport at the time of rendering.

There probably exists a workaround for this that preserves the grad1 DIV, but why not simply put the background image/gradient into the body? From what I can see, the background is to expands across the whole document anyway.

Pekka 2010-02-28 12:20:30

Ah, that makes sense. I didn't do that because I have to specify a height for the element with the gradient (Otherwise the drawn gradient has a different height depending on each page)...

Rich Bradshaw 2010-02-28 12:23:51

@Rich I see. From what I can see looking in the gradient documentation, you should be able to set a `background-size` to fix the height of the gradient (I haven't worked with gradients before but it looks like it.)

Pekka 2010-02-28 12:27:10

Yeah, I've just been digging around and found the same thing. It does work, but the gradient repeats. Setting no-repeat on the background image causes it to stop being rendered, setting repeat-y does nothing! :(

Rich Bradshaw 2010-02-28 12:30:20

Aha! Repeat-x! Of course!

Rich Bradshaw 2010-02-28 12:31:29

Answer 2

A:

OK, for people who find this and can't work it out, the CSS should look like this:

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

Rich Bradshaw 2010-02-28 12:34:06

ansaurus

tags:

views:

answers:

CSS: Setting a background gradient to width 100% fine unless page scrolls.

related questions