Top and Bottom Gradient Background : CSS / HTML
While 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. When you minimize the browser window followed by a maximize browser window, some browsers 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. I am using the code for one of my client’s website as well.
<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>
(3 votes, average: 5.00 out of 5)
Loading ...
Leave your response!