Question

我有一个带有背景图片的页面。问题是，当我在其中放入更多内容时，会出现一个滚动条，当我向下滚动时，图像不固定！如何让图像保持原样？任何帮助将不胜感激！谢谢。

enter image description here

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;
}

Answer 1

尝试设置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;
}

插入更多内容时，背景图像不固定

1 个答案: