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).
Regarding a previous answer, setting html
and body
to height: 100%
doesn't seem to work if the content needs to scroll. Adding fixed
to the background seems to fix that - no need for height: 100%;
E.g.:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
I know I'm late to the party, but here's a more solid answer.
All you need to do is use min-height: 100%;
rather than height: 100%;
and your gradient background will extend the entire height of the viewport without repeating, even if the content is scrollable.
Like this:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}