0

当我的 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;
}
4

2 回答 2

1

在 body 元素上将溢出设置为隐藏,并将 #page div 改为可滚动元素。像这样:

html, body {
   height: 100%;
   overflow: hidden;
   background-image:url(img3.jpg);
   background-size:cover;
   background-repeat:no-repeat;
}

#page {
   height: 100%;
   overflow: auto;
}
于 2013-11-02T20:45:28.650 回答
0

尝试将其应用于您的身体:

body {
    background:url(img3.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;
}
于 2013-11-02T20:32:02.250 回答