我的问题是背景“backgroundmain.png”不会重复，无论我做什么...我已经尝试添加更多div来包含身体中的所有东西，但仍然没有运气......我需要“backgroundmain” .png“完全重复以覆盖页面底部的内容。
P.S。我觉得这可能是所有div使用的问题，我只是不能指出它，所以我要求一套清新的眼睛。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>MetLoop</title>
<link rel="stylesheet" type="text/css" href="defaults.css">
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</head>
<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
<ul>
<li style="margin-left: 15%"><a href="index.html">Home</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#Services">Our Service</a></li>
<li><a href="#Map">Interactive Weather Map</a></li>
<li style="float:right; margin-right: 15%"><a href="#Login">Log In</a></li>
<li style="float:right;"><a href="#Signup">Sign Up</a></li>
</ul>
</nav>
<div class="background">
<div class="main">
<!-- LOCAL WEATHER -->
<div class="localweather">
<p id="zipcode">Please enter your zip code to view today's local weather</p>
<br>
<form>
<input type="number" name="Zip Code"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
<!-- VIDEO NEWSLETTER -->
<div class="newsletter">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
</div>
<!-- TWITTER FEED -->
<div class="feed">
<a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
</div>
<!-- 7 DAY FORECAST -->
<div class="weekweather">
<p>Please enter your zip code above to view an accurate 7 day forecast</p>
</div>
<!-- LIVE RADAR MAP -->
<div class="radar">
<img src="images/usaweather.gif">
</div>
</div>
</div>
</body>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</html>
=============================================== =================================
CSS：
body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
#back {
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
}
/*Navigation Bar*/
nav {
top: 0;
margin-top: 48px;
text-align: center;
}
ul {
z-index: 1;
margin-top: 20px;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 5%;
position: fixed;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: white;
color: black;
font-size: 125%;
}
/*END NAV*/
/*Body Info*/
.main {
position: absolute;
top: 0;
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
min-height: 100%;
margin-left: 15%;
margin-top: 48px;
width: 70%;
height: 100%;
}
/*Local Weather*/
.localweather {
box-sizing: border-box;
position: relative;
top: 0;
margin-top: 20px;
margin-left: 40px;
height: 50%;
width: 20%;
background-image: url("images/weatherphoto.png");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
padding-top: 12%;
}
#zipcode {
font-family: 'Open Sans';
font-weight: 800;
font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
position: absolute;
background-color: grey;
height: 50%;
width: 50%;
left: 26%;
top: 2%;
}
/*TWITTER FEED*/
.feed {
position: absolute;
height: 85%;
width: 20%;
left: 78%;
top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
background-image: url("images/week.png");
background-repeat: no-repeat;
width: 75%;
height: 29%;
position: absolute;
top: 55%;
left: 3%;
text-align: center;
padding-top: 5%;
font-weight: 800;
font-style: italic;
}
/*RADAR MAP*/
.radar {
background-image: url("images/backgroundmain.png");
position: absolute;
left: 5%;
top: 90%;
}
.radar img {
height: 100%;
width: 100%;
}
答案 0 :(得分：2)
#back上的背景正在重复，但不会显示，因为该元素的高度为0px。它的高度是0px，因为它的孩子绝对定位。如果您将高度指定为#back，则可以看到它正在重复。解决方案是将高度指定为#back或重新设计布局以重新定位事物，以便它们在页面上保持布局并使#back的高度为非零。
body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
#back {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: repeat-y;
min-height: 500vh;
}
/*Navigation Bar*/
nav {
top: 0;
margin-top: 48px;
text-align: center;
}
ul {
z-index: 1;
margin-top: 20px;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 5%;
position: fixed;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: white;
color: black;
font-size: 125%;
}
/*END NAV*/
/*Body Info*/
.main {
position: absolute;
top: 0;
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
min-height: 100%;
margin-left: 15%;
margin-top: 48px;
width: 70%;
height: 100%;
}
/*Local Weather*/
.localweather {
box-sizing: border-box;
position: relative;
top: 0;
margin-top: 20px;
margin-left: 40px;
height: 50%;
width: 20%;
background-image: url("images/weatherphoto.png");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
padding-top: 12%;
}
#zipcode {
font-family: 'Open Sans';
font-weight: 800;
font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
position: absolute;
background-color: grey;
height: 50%;
width: 50%;
left: 26%;
top: 2%;
}
/*TWITTER FEED*/
.feed {
position: absolute;
height: 85%;
width: 20%;
left: 78%;
top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
background-image: url("images/week.png");
background-repeat: no-repeat;
width: 75%;
height: 29%;
position: absolute;
top: 55%;
left: 3%;
text-align: center;
padding-top: 5%;
font-weight: 800;
font-style: italic;
}
/*RADAR MAP*/
.radar {
background-image: url("images/backgroundmain.png");
position: absolute;
left: 5%;
top: 90%;
}
.radar img {
height: 100%;
width: 100%;
}<html>
<head>
<title>MetLoop</title>
<link rel="stylesheet" type="text/css" href="defaults.css">
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</head>
<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
<ul>
<li style="margin-left: 15%"><a href="index.html">Home</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#Services">Our Service</a></li>
<li><a href="#Map">Interactive Weather Map</a></li>
<li style="float:right; margin-right: 15%"><a href="#Login">Log In</a></li>
<li style="float:right;"><a href="#Signup">Sign Up</a></li>
</ul>
</nav>
<div class="background">
<div class="main">
<!-- LOCAL WEATHER -->
<div class="localweather">
<p id="zipcode">Please enter your zip code to view today's local weather</p>
<br>
<form>
<input type="number" name="Zip Code"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
<!-- VIDEO NEWSLETTER -->
<div class="newsletter">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
</div>
<!-- TWITTER FEED -->
<div class="feed">
<a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
</div>
<!-- 7 DAY FORECAST -->
<div class="weekweather">
<p>Please enter your zip code above to view an accurate 7 day forecast</p>
</div>
<!-- LIVE RADAR MAP -->
<div class="radar">
<img src="images/usaweather.gif">
</div>
</div>
</div>
</body>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</html>