Top and Bottom Gradient Background
By manik26 • Dec 13th, 2008 • Category: BlogWhile working on a new project I got into this. I have to have a background on top and also at the bottom of the page. Nothing too difficult. Only problem was making it work on all browsers. On some browsers it seem to show the background color at the bottom instead of re-rendering the bottom to the browser window bottom. So this is what I came up with seem to work on all major browsers.
<html>
<head>
<style type=”text/css”>
html, body {height:100%}
body {
margin: 0;
padding: 0;
color: #000000;
background: URL(images/page_bg.jpg) top left repeat-x #7C8FF7;
}
#bottom_gradient {
min-height: 100%;
height: auto !important;
height: 100%;
color: inherit;
background: URL(images/page_bg_bottom.jpg) bottom left repeat-x;
}
</style>
</head>
<body>
<div id=”bottom_gradient”>
test test test
<div style=”background-color:red;width:20px;height:400px;”> </div>
<div style=”background-color:blue;width:20px;height:40px;”> </div>
</div>
</body>
</html>
