div がブラウザーの画面の高さを超え始めると、スクロール バーが表示されますが、これは問題ありません。しかし、本文は background-size プロパティを失い、本文には画像のない空白スペースがすべてあります。背景の繰り返しプロパティを使用せずに本文に画像を保持するにはどうすればよいですか? どんな提案でも大歓迎です。ありがとうございました。
例 - 赤い枠の 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;
}