CSS Background Gradient Repeat Issue
I have a html page that needs to expand width and height, so needs to be able to scroll up and down and left and right, however I can't seem to get the css gradient to repeat-x and leave a solid colour downwards.
Stripped down code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
html {
height: 100%;
background-color: #366fcd; }
body {
margin: 0;
height: 100%;
width: 100%;
background-color: #366fcd;
background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd));
background-repeat: repeat-x;
}
div#TheElement {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 2000px;
top: 2000px;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
This runs the gradient into a solid colour (#366fcd) when you scroll down, but when you scroll开发者_如何学Python right, the gradient stops and you see the solid colour there too. See example.
If I remove the background-color: #366fcd; } from the html element, then the gradient repeats along the x-axis as expected, but when you scroll down, the gradient stops and white appears. See example.
I know I could always resort to using a background image, but would prefer to get the CSS working.
Oh yeah, this is tested in Chrome and FF on OSX Lion.
Anthony
All you need is background-attachment property. With this property you can fix the background of the body while your body is filling screen height completely.
background-attachment:fixed;
height:100%;
Look at my example here http://jsfiddle.net/mohsen/TanzY/
Here is your example fixed: http://jsbin.com/ileqid/4
I removed background-repeat property and also changed colors to be more visual.
If you want your background scrolls then you need to set the background-attachment to scroll. Scroll only happens if you have a tall content so in this example I set the body tag height to 3000px.
Apply your gradients to the html tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
html, body {
width:100%;
height:100%;
margin:0;
padding:0;}
html {
background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x;
background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x;
}
div#TheElement {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 2000px;
top: 2000px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
Tested in FF6, Chrome 13 and Safari 5.
加载中,请稍侯......
精彩评论