背景尺寸：封面；使页面可滚动到两侧答案

【问题标题】：background-size: cover; makes page scrollable to sides背景尺寸：封面；使页面可滚动到两侧
【发布时间】：2015-12-29 23:06:20
【问题描述】：

我正在测试视差滚动效果，其中有背景图片，通过滚动可以看到图片的不同部分。问题是，当我缩小页面时，图片重复，这很难看。我试过不重复；它只会让图片停留在一个角落，我已经尝试过 background-size: cover;这使得页面可以滚动到我不需要的侧面。

如何处理？

编辑：很抱歉忘记发布代码。

HTML 和 CSS：

.parallax {
    background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}

.parallax-inner{
    padding-top: 10%;
    padding-bottom: 10%;
}

     <section class="parallax">
    
        <div class="parallax-inner">
      
              <h2>My First Heading</h2>
        </div>
    
    </section>

示例：http://prntscr.com/9jv8d4

缩小：http://prntscr.com/9jv8sd

不重复； http://prntscr.com/9jv94p

覆盖并在 1920x1080 屏幕上，默认 100% 缩放； http://prntscr.com/9jv9ur（页面可滚动到最右侧）

【问题讨论】：

你需要发布你的代码
请发布您的示例代码
如果您删除该 css 并改用 background-color 怎么办？
刚刚试了，可以的。用于背景的图像尺寸是 1920x1080，是不是太大了？
也许尝试background-size: 100% 100%而不是cover，如果你真的需要COVER然后设置overflow-x: hidden;

标签： html css

【解决方案1】：

尝试将您的 css 代码更改为如下：

body {
    margin: 0;
}
.parallax {
    background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.parallax-inner{
    padding-top: 10%;
    padding-bottom: 10%;
}

我自己测试过，效果很好，希望对你有帮助。

资源将对您有用： https://css-tricks.com/perfect-full-page-background-image/

【讨论】：

【解决方案2】：

只需使用

body{
    margin: 0;
    padding:0;
}

【讨论】：