Css3 Gradient Background Set on Body Doesn't Stretch But Instead 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).

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



Leave a reply



Submit