我有一个带有背景图片的页面。问题是，当我放入更多内容时，出现滚动条，当我向下滚动时，图像不固定!如何让图像保持原样？任何帮助将不胜感激!谢谢。
html:
<body>
<div id="main_wrapper">
<div id="profile_page">
<div id="username">
<h1>Kakar Nyori</h1>
</div>
<!------------------------ Left column ------------------------------>
<div id="profile_leftbar">
<div id="profile_picture">
<img src="image/me.jpg">
</div>
<div id="about">
<p>CEO, Arunachal Service</p>
<hr>
<p>Bangalore</p>
<hr>
<p>India</p>
<hr>
<p>19 October</p>
<hr>
<p>+ About</p>
</div>
<ul id="follow_message">
<li class="follow"><a href="#">Follow</a></li>
<li class="message"><a href="#">Message</a></li>
<div class="clear_left"></div>
</ul>
</div>
<!------------ end of left column --------------->
<!----------------------- Right column ------------------------------>
<div id="profile_rightbar">
<div id="shortcuts">
<div class="icon pink">
<a href="#">
<p>Pictures</p>
<p>210</p>
</a>
</div>
<div class="icon green">
<a href="#">
<p>Videos</p>
<p>210</p>
</a>
</div>
<div class="icon blue">
<a href="#">
<p>Forums</p>
<p>210</p>
</a>
</div>
<div class="icon orange">
<a href="#">
<p>Pages</p>
<p>210</p>
</a>
</div>
<div class="icon pink">
<a href="#">
<p>Followers</p>
<p>210</p>
</a>
</div>
<div class="icon green">
<a href="#">
<p>Following</p>
<p>210</p>
</a>
</div>
</div>
<div class="clear_left"></div>
<div id="status">
<p>Always do your best. What you plant now, you will harvest later.</p>
</div>
<div id="write">
<textarea id="redactor" name="content">
</textarea>
</div>
<div id="activity">
<div class="picture">
<a href="#">
<p>The world is so perfect. How can one not love this beautiful world.</p>
<img src="image/world.jpg">
</a>
</div>
<div class="picture">
<a href="#">
<p>The world is so perfect. How can one not love this beautiful world.</p>
<img src="image/world.jpg">
</a>
</div>
<div class="forum">
<a href="#">
</a>
</div>
<div class="video">
<a href="#">
</a>
</div>
<div class="page">
<a href="#">
</a>
</div>
<div class="following">
<a href="#">
</a>
</div>
</div>
</div>
</div>
<!------------ end of right column -------------->
</div>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
}
#main_wrapper {
width:100%;
height: 100%;
background:url(../image/pantera.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#profile_page {
width: 800px;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
#username h1 {
text-align: center;
color: white;
}
#profile_leftbar {
width: 210px;
float: left;
}
#profile_picture {
background-color: white;
border-radius: 10px;
border: 1px solid #dbdbdb;
}
#profile_picture img {
display: block;
margin: 0 auto;
border: none;
max-width:190px;
padding: 8px;
}
#about {
background: #f4f4f4;
border-radius: 5px;
margin-top: 8px;
border: 1px solid #dbdbdb;
}
#about p {
text-align: center;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
}
#about hr {
height:1px;
border:0px solid ;
border-top:1px solid #ccc;
}
#follow_message {
width: 210px;
margin: 5px auto;
}
#follow_message li {
list-style-type: none;
float: left;
margin-left: 3px;
}
#follow_message a {
display: block;
width: 101px;
text-align: center;
height: 30px;
color: white;
text-decoration: none;
line-height: 30px;
margin: 2px 0;
background: maroon;
}
#profile_rightbar {
float: right;
width: 590px;
}
#shortcuts {
overflow: hidden;
width: 588px;
margin: 0 auto;
}
#shortcuts div {
float: left;
margin: 4px;
}
.icon a {
text-decoration: none;
text-align: center;
display: block;
color: white;
border-radius: 5px;
width: 88px;
padding: 1px;
}
.icon a:hover {
text-decoration: underline;
}
.pink a {
background-color:#d63175;
}
.green a {
background-color:#51b73c;
}
.blue a {
background-color:#2f8ae0;
}
.orange a {
background-color:#f7a809;
}
#status {
background-color:white;
box-shadow:5px 5px 20px 1px black;
max-width:490px;
word-wrap:break-word;
padding:6px;
margin: 15px auto;
text-align:center;
font-size:30px;
line-height: 32px;
}
#write {
width: 575px;
margin: 0 auto;
}
#write textarea {
font-size:20px;
max-width:575px;
width: 575px;
}
#activity {
margin: 10px;
width: 575px;
}
#activity {
background:rgb(255,255,255);
}
#activity div {
background: white;
margin: 0 auto;
}
#activity .picture a img {
display: block;
max-width: 540px;
margin: 0 auto;
}
.picture a {
color: black;
text-decoration: none;
}
.picture a p {
margin-top:15px;
margin-left:15px;
}
最佳答案
尝试为 html 元素而不是 #main_wrapper 设置背景:
html {
width: 100%;
height: 100%;
background:url(../image/pantera.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
关于html - 插入更多内容时背景图像不固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21122573/