My CSS Gradient Doesn't Stretch, It Repeats

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

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit: Added margin: 0; to body declaration per comments (Martin).

Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).

Gradient background not stretching to cover top to bottom

If you dont want it to repeat just add no-repeat to the end of the linear-gradient.

For example:

background: linear-gradient(red, white, blue) no-repeat;

Then set your height as anything you want.

If you want to make it height = 100% then just make a div tag with the following css.

background: -webkit-linear-gradient(red, white, blue) no-repeat;
background: -moz-linear-gradient(red, white, blue) no-repeat;
background: -o-linear-gradient(red, white, blue) no-repeat;
background: linear-gradient(red, white, blue) no-repeat;
position: absolute;
height: 100%;
width:100%;
left:0;
top:0;

You don't want to make the body an absolute. But then again you wouldn't need no-repeat if you were to do it the second way with the div tag.

How to not repeat a CSS background gradient

You can use the background-repeat CSS property:

background-repeat: no-repeat;

Edit: There is a more complete/helpful answer here that provides a couple of different solutions.

HTML background Gradient repeating

body has a margin by default in most if not all browsers. Thus the vertical scrollbar when in fact you've set a height of 100% and not set more than 100...

In DevTools or Firebug, you can display these default values (Firebug: HTML / Style on right, it's in the dropdown) and see that there's a margin of 8px on body thus a body taller than 100% by 16px, the exact value of repeated gradient (in Firefox).

Just add body { margin: 0; } and no more scrollbar or repeated gradient.

Fiddle: http://jsfiddle.net/ey7kfog3/4/

EDIT: it's present in most reset.css and alike like Eric Meyer's one or normalize

How to stretch gradient background to fit the page?

Just like you can specify 2 comma-separated backgrounds, you can do the same for all other background- properties. Adding this:

background-size:auto,cover;
background-position:top left, center;

Will yield the intended result.

Want the gradient to fill the viewport statically, and the flakes to scroll? Easy:

background-attachment:scroll,fixed;

Demo here.

Having said all this, for compatibility it is of course much easier to just put the gradient on html and the flakes on body, but with CSS3 it's all possible just fine what you want.

---

Related Topics