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).
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.
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.
Related Topics
Prevent Body Scrolling But Allow Overlay Scrolling
Css Units - Difference Between Vh/Vw and %
Black Transparent Overlay on Image Hover With Only Css
Opacity CSS Not Working in Ie8
:First-Child Not Working as Expected
Is Embedding Background Image Data into CSS as Base64 Good or Bad Practice
Internet Explorer'S CSS Rules Limits
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
Pure CSS Checkbox Image Replacement
Left Aligned Last Row in Centered Grid of Elements
Difference Between @Import and Link in Css
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
Split Div into 2 Columns Using CSS
How to Include CSS Files Using Node, Express, and Ejs