Menu
So I'd like to have a gradient that fills 100% of the background of a webpage. For browsers that can't handle it, a solid color is fine.
here is my current css:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* W3C */
}
It seemed to work out while the page had little content, but as I've filled out the page with more content, navigation, etcetera, there is now some white at the bottom. maybe 100px or so. Am I doing this wrong? Do I need to be offsetting some padding somewhere?
214
asked May 16 '11 23:05
Get rid of your height: 100% declarations. It seems like setting the height to 100% just sets it to 100% of the viewport, not actually 100% of the page itself.
101
Here's an expansion of my comment to use SVG instead of vendor prefix and proprietary extensions. This reduces the size of the CSS and, with the employment of some ingenius tactics, can allow you to use a single SVG file as a sprite pack for gradients (reducing the total number of HTTP requests).
First create your SVG file and gradient (per your question specs):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<defs>
<linearGradient id="ui-bg-grad" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#afb1b4" />
<stop offset="100%" stop-color="#696a6d" />
</linearGradient>
</defs>
<rect fill="url(#ui-bg-grad)" x="0" y="0" width="100%" height="500"/>
</g>
</svg>
Next, here's your new declaration:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: #afb1b4; /* Old browsers: anything not listed below */
background-image: url("grad.svg"); /** Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+
}
Now, if you want to support older browsers with png image, you can with one little change. Since any property that uses url() does not support hinting (like @font-face's src property), you have to alter the rule a little.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: #afb1b4; /* Image fails to load, or FF3.5 */
background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}
body:not(foo) { /* most browsers that support :not() support SVG in url(), except FF3.5 */
background-image: url("grad.svg"); /* Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+ */
}
If you want to get stupid crazy, you could base64encode the SVG file so that you don't have to download another file from the server then add it as a class to be reused (prevent repasting the base64 in multiple place).
.svg-sprite:not(foo)
{
background-size: 100% 100%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI1MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InVpLWJnLWdyYWQiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYWZiMWI0IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5NmE2ZCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3VpLWJnLWdyYWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MDAiLz48L2c+PC9zdmc+");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: #afb1b4; /* Image fails to load, or FF3.5 */
background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}
Then update your body tag to include the .svg-sprite class.
4
I also found that adding 'fixed' to the end seemed to do the trick:
body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) fixed no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)) fixed; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Opera11.10+ */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* W3C */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With