如何删除水平滚动条？

Question

当用户的设备宽度超过480像素时，我会向他显示原始GIF作为我网站的背景。

我的HTML：

<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">

我的CSS：

.background {
    display: block;

    height: 100%;
    margin: 0 auto;
}

当用户的设备宽度小于480px时，我将GIF的宽度增加到200％，因为不增加烟雾看起来非常简洁和瘦弱：

所以，我在我的CSS中这样做：

@media screen and (max-width: $breakpoint) {
    .background {
        position: absolute;
        left: -50%;

        max-width: 200%;
    }
}

这是一个问题。随着我的GIF增加2倍，我得到水平滚动条。看看：

我真的需要增加GIF，这样烟雾看起来更广泛。如何删除由GIF创建的右侧空白处？或者也许还有其他方法来增加GIF的宽度？我尝试以不同的方式使用overflow。此外，我尝试将body宽度设置为设备屏幕的100％。

Answer 1

将此添加到您的CSS中，引用您需要的元素（在此示例中应该是整个html或body，如果这是您的整个网站背景，顺便说一句）：

html, body {
    overflow-x: hidden;
}

Answer 2

在你的风格中添加background-attachment:fixed;

代码确切：

.background {
      display: block;
      background-attachment:fixed;
      height: 100%;
      margin: 0 auto;
}

Answer 3

您应尝试使用具有可选缩放百分比的背景中心。 完整编辑位于https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI

.bg{
     width: 100%;
     height: 100%;
     background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
     background-size: cover; 
}

和当然只是放弃一个div

<div class="bg"></div>