当我的 div 开始超过浏览器屏幕高度时,会出现一个滚动条,这没关系。但是 body 失去了 background-size 属性,并且在没有图像的情况下,body 中有整个空白区域。如何在不使用背景重复属性的情况下将图像保留在正文中?任何建议将不胜感激。谢谢你。
示例 - 当红色边框 div 不超过浏览器高度时:
示例 - 当红色边框 div 超过浏览器高度时:
html:
<body>
<div id="container_page">
<div id="page">
<div id="name">
<p>Selena Gomez</p>
</div>
<div id="profile_img">
<img src="img.jpg" class = 'profile_pic'/>
</div>
<div id="wrapper_container_summary">
<div id="container_summary">
<div id="summary">
<div id="box1" class="box">
<a href=""><p>Photo</p>
<p>450</p></a>
</div>
<div id="box2" class="box">
<a href=""><p>Video</p>
<p>132</p></a>
</div>
<div id="box3" class="box">
<a href=""><p>Page</p>
<p>14</p></a>
</div>
<div id="box4" class="box">
<a href=""><p>Forum</p>
<p>51</p></a>
</div>
<div id="box5" class="box">
<a href=""><p>Followers</p>
<p>551</p></a>
</div>
<div id="box6" class="box">
<a href=""><p>Following</p>
<p>317</p></a>
</div>
<span class="clear_left"></span>
</div>
<div id="status">
<p>What???</p>
</div>
</div>
</div>
<div id="container_logs">
<div id="logs">
<p>Added photo on 30th oct</p>
<p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
<p>Added photo on 16th oct</p>
<p>Updated status 'Do you really think so?' on 10th Oct.</p>
<p>Uploaded video.</p>
<p>Added photo on 30th oct</p>
<p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
<p>Added photo on 16th oct</p>
<p>Updated status 'Do you really think so?' on 10th Oct.</p>
<p>Uploaded video.</p>
<p>Added photo on 30th oct</p>
<p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
<p>Added photo on 16th oct</p>
<p>Updated status 'Do you really think so?' on 10th Oct.</p>
<p>Uploaded video.</p>
<p>Added photo on 30th oct</p>
<p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
<p>Added photo on 16th oct</p>
<p>Updated status 'Do you really think so?' on 10th Oct.</p>
<p>Uploaded video.</p>
<p>Added photo on 30th oct</p>
<p>Created a blog <a href="#">'This world'</a> on 17th oct.</p>
<p>Added photo on 16th oct</p>
<p>Updated status 'Do you really think so?' on 10th Oct.</p>
<p>Uploaded video.</p>
</div>
</div>
</div>
</div>
</body>
CSS:
* {
margin: 0px;
padding: 0px;
}
.clear_both {
display:block;
clear:both;
}
.clear_left {
display:block;
clear:left;
}
.clear_right {
display:block;
clear:right;
}
html {
height:100%;
}
body {
min-height:100%;
border: 1px solid transparent;
}
body {
background-image:url(img3.jpg);
background-size:cover;
background-repeat:no-repeat;
}
#container_page {
}
#page {
box-shadow:inset 0px 0px 10px 3px lightskyblue;
min-height:600px;
width:900px;
margin:10px auto;
position:relative;
}
#name {
width:830px;
margin:0 auto;
border:1px solid red;
}
#name p {
text-align: center;
font-family:fantasy;
font-size:30px;
color:white;
}
#profile_img {
width:200px;
background-color:white;
margin-top:20px;
margin-left:20px;
border-radius:10px;
border:1px solid red;
}
.profile_pic {
padding:10px;
display:block;
margin:0 auto;
max-width:180px;
border:none;
}
#wrapper_container_summary {
position:absolute;
right:15px;
top:80px;
border:1px solid red;
}
#container_summary {
/*border: 1px solid blue;*/
position:relative;
float:right;
width:650px;
top:0px;
}
#summary {
/*border:1px solid yellow;*/
width:510px;
margin:0 auto;
}
#summary div {
float:left;
}
.box {
font-size:13px;
color:white;
width:75px;
height:70px;
margin:5px;
text-align:center;
line-height:25px;
font-family:'arial';
font-weight:bold;
cursor:pointer;
border-radius:5px;
}
.box a {
display:block;
margin-top:10px;
text-decoration:none;
color:white;
}
.box a:hover {
text-decoration:underline;
}
.box p {
margin:0px;
padding:0px;
}
#box1 {
background-color:#d63175;
box-shadow: 0px 0px 20px 1px;
}
#box2 {
background-color:#51b73c;
box-shadow: 0px 0px 20px 1px;
}
#box3 {
background-color:#2f8ae0;
box-shadow: 0px 0px 20px 1px;
}
#box4 {
background-color:#f7a809;
box-shadow: 0px 0px 20px 1px;
}
#box5 {
background-color:#d63175;
box-shadow: 0px 0px 20px 1px;
}
#box6 {
background-color:#51b73c;
box-shadow: 0px 0px 20px 1px;
}
#status {
background-color:white;
box-shadow:5px 5px 20px 1px black;
max-width:500px;
margin:10px auto;
padding:10px;
}
#status p {
text-align:center;
font-size:30px;
}