我正在尝试应用背景图片来覆盖整个页面。有人能告诉我我做错了什么吗？我的背景图片并未涵盖整个页面。这是页面：
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1" class="active"><i class="fa fa-user"> </i> About</a></li>
<li><a href="#section2"><i class="fa fa-pencil-square-o"> </i> Portfolio</a></li>
<li><a href="#section3"><i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<a href="https://www.linkedin.com/in/ai-truong-1b071861" target="_blank"> <img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/> </a>
<a href="https://github.com/aitruong" target="_blank"> <img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/> </a>
<a href="mailto:happymina21@yahoo.com"><img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/> </a>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：2)
除了现有的CSS之外，你可能还需要这个：
body { background-size: cover; }
答案 1 :(得分：1)
您的代码中有两个错误：
body { background-size: cover; }
缺少。但另外你需要将section3元素放在背景div中。否则，背景将在第3节之前停止
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
答案 2 :(得分：0)
HTML文档的结构也无效。使用以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1" class="active"><i class="fa fa-user"> </i> About</a></li>
<li><a href="#section2"><i class="fa fa-pencil-square-o"> </i> Portfolio</a></li>
<li><a href="#section3"><i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<a href="https://www.linkedin.com/in/ai-truong-1b071861" target="_blank"> <img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/> </a>
<a href="https://github.com/aitruong" target="_blank"> <img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/> </a>
<a href="mailto:happymina21@yahoo.com"><img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/> </a>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong<a href="#"></a> © 2016</p>
</footer>
</body>
</html>
替换以下CSS：
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
使用：
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
答案 3 :(得分：0)
尝试应用此：
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
答案 4 :(得分：0)
像这样设置你的背景
background: #ffffff url(bg.jpg) repeat;
例如对于身体，设置你的CSS
body { background: #ffffff url(your_bg.jpg) repeat; }
答案 5 :(得分：0)
尝试：
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
否则你可以试试：
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}