CSS Gradient on body
Here's a little trick you can use to apply a CSS gradient to your HTML <body> that covers the entire height of the screen. The obvious way to do this is to use the following cross-browser code (courtesy of http://www.colorzilla.com/gradient-editor/):
html {
height: 100%;
}
body {
height: 100%;
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
But here's a caveat: if the height of your body contents are less than the screen height then the gradient shrinks to fit the height of the content, and gets repeated down below. It's terrible to look at!
However, to solve this problem all you need to do is add these extra three lines of CSS to your body selector:
margin: 0;
background-repeat; no-repeat;
background-attachment: fixed;
Problem solved! Ain't it easy? And ain't CSS cool?
