我无法让我的背景线性渐变重复超过我的内容区域的末尾。我已经尝试过重复和重复，但我不知道还能做什么。这是输出的预览：http: //jsfiddle.net/derbyshirehayes/ZhsQH/
HTML 代码：
<html>
<head>
<title>hiii582</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="gradient_background">``
<div id="wrap">
<div id="padding1"></div>
<div id="header">
<img src="images/header.png"/>
</div>
<div id="padding1"></div>
<div id="navigation_bar">
<img src="images/navigation_bar.png"/>
</div>
<div id="padding"></div>
<div id="content_area">
<img src="images/content_area.png"/>
</div>
<div id="padding"></div>
</div>
</div>
</body>
</html>
CSS 代码：
body {
margin: 0px;
padding: 0px;
}
#wrap {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#gradient_background {
background-image: -webkit-linear-gradient(top, #8c9bb2 0%, #5b8fdf 100%);
background-repeat: repeat-y;
}
#header {
width: 900px;
height: 100px;
background-image: url('images/header.png');
background-repeat: no-repeat;
}
#navigation_bar {
width: 901px;
height: 36px;
background-image: url('images/navigation_bar.png');
background-repeat: no-repeat;
}
/* Padding between navigation bar and content */
#padding {
padding: 10px;
}
#padding1 {
padding: 5px;
}
#content_area {
width: 899px;
height: 404px;
background-image: url('images/content_area.png');
background-repeat: no-repeat;
}