CSS3 gradient background set on body doesn't stretch but instead repeats?

Posted by John Isaacks on Stack Overflow See other posts from Stack Overflow or by John Isaacks
Published on 2010-05-19T20:40:23Z Indexed on 2010/05/19 21:00 UTC
Read the original article Hit count: 365

Filed under:

css3

|

gradient

|

background

|

css

ok say the content inside the <body> totals 300px high.

If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient

Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.

I am assuming this is not a bug since it is the same in both webkit and gecko.

But is there a way to make the gradient stretch to fill the window instead of repeat?

© Stack Overflow or respective owner

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Related posts about gradient

Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
UITableViewCell with custom gradient background, with another gradient as highlight color

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a custom UITableViewCell with a custom layout. I wanted a gradient background, so in my UITableViewDelegate cellForRowAtIndexPath: method, I create a CAGradientLayer and add it to the cell's layer with insertSubLayer:atIndex: (using index 0). This works just fine except for two things: Most… >>> More
Gradient fill bitmap and CreatePatternBrush just gives black fill instead of gradient

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to create a Gradient Brush in windows mobile as follows: HBITMAP hBitmap = CreateBitmap(16, 16, 1, 16, NULL); HDC hDC = CreateCompatibleDC(NULL); HBITMAP hPrevious = SelectObject(hDC,hBitmap); TRIVERTEX vert[2]; GRADIENT_RECT gRect; ... fill in vert and gRect GradientFill(hDC… >>> More
How to implement Cross Browser Opacity Gradient (Not Color Gradient)

as seen on Stack Overflow - Search for 'Stack Overflow'
How can I implement cross browser opacity gradient (not color gradient)? See following code: <div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div> It works fine… >>> More
3x3 Sobel operator and gradient features

as seen on Stack Overflow - Search for 'Stack Overflow'
Reading a paper, I'm having difficulty understanding the algorithm described: Given a black and white digital image of a handwriting sample, cut out a single character to analyze. Since this can be any size, the algorithm needs to take this into account (if it will be easier, we can assume the size… >>> More