如何使用css制作页面，背景图像是cover，同时具有滚动和响应能力？

Question

I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div. 我想制作一个页面，通过向下滚动内容div来覆盖背景图像。所以我为主体放置背景图像并创建2个div，它在大窗口尺寸下工作，但是当我更改窗口尺寸时，并使其变小（以测试响应速度），图像和内容div之间存在白色间隙。

Would you please help me to remove it? 您能帮我删除它吗？

       <html>
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>first</title>

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
                <link href="css/first.css"  rel="stylesheet">

        <style>

        body{

            background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
            background-size:100%;


        }


        </style>
        </head>


        <body>

        <div class="cover"></div>
        <div class="content">Lorem Ipsum is simply dummy text of </div>   

        </body>
        </html>



.cover{
    height: 1232px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;

}
.content{
    width: 100%;
    height: 100%;
    background: gray;
    margin: 0;
    padding: 0;
}

Answer 1

You need to make the body and the html go to the bottom of the page: 您需要使正文和html转到页面底部：

body, html {
    min-height: 100%;
}

and then set the background to background-size: cover; 然后将背景设置为background-size: cover; : https://css-tricks.com/perfect-full-page-background-image/ ： https : //css-tricks.com/perfect-full-page-background-image/

Answer 2

You could do something like this: 您可以执行以下操作：

<div id="yourdiv"></div>

#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Hope it helps! 希望能帮助到你！

Answer 3

Sounds like it's probably due to your background image not filling the full space available. 听起来可能是由于您的背景图片无法填充可用的全部空间。

Try adding this to the body (the element with the BG image); 尝试将其添加到主体（带有BG图像的元素）中；

background-size:cover;

Note that this will not work well on old browsers 请注意，这在旧版浏览器上无法正常运行

如何使用css制作页面，背景图像是cover，同时具有滚动和响应能力？

问题描述

3 个解决方案

解决方案1
0 2016-01-27 08:13:05

解决方案2
0 2016-01-27 08:13:55

解决方案3
0 2016-01-27 08:17:12

如何使用css制作页面，背景图像是cover，同时具有滚动和响应能力？

问题描述

3 个解决方案

解决方案1 0 2016-01-27 08:13:05

解决方案2 0 2016-01-27 08:13:55

解决方案3 0 2016-01-27 08:17:12

解决方案1
0 2016-01-27 08:13:05

解决方案2
0 2016-01-27 08:13:55

解决方案3
0 2016-01-27 08:17:12