背景图像不占全角答案

【问题标题】：background image not taking up full width背景图像不占全角
【发布时间】：2018-05-19 20:35:25
【问题描述】：

我目前正在定位一个高度较小但宽度较大的背景图像，以便在浏览器中一直延伸。我只有在做背景尺寸封面时才能做到这一点，但当我为封面以外的图像设置一定的尺寸时不能做到这一点。我尝试了后台重复-x，但这似乎也不起作用。

<html>
  <body>
    <div class="background">
      <div class=“header”></div>
      //some content
    </div>
    <footer><footer/>
  </body>
 </html>

CSS

.background {
    background-image: url(some image);
    background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
    background-repeat: repeat-x;
    background-position-y: bottom;
}
html, body, .background {
    height: 100%;
}

【问题讨论】：

我为什么投了反对票？
您没有提供有效的 html 供我们测试
请更新 html 部分并提供正确的 html（带有正确的标签），以便可以帮助解决问题。

标签： html css

【解决方案1】：

它正在使用 background-size:100%;

.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;

}

【讨论】：

【解决方案2】：



    html, body{
      height: 100%;
    }
    body { 
    			background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
    			background-position: center center;
    			background-repeat:  no-repeat;
    			background-attachment: fixed;
    			background-size:  cover;
    			background-color: #999;
      
    }

    div, body{
      margin: 0;
      padding: 0;          
    }
    .wrapper {
      height: 100%; 
      width: 100%; 
    }
    <div class="wrapper">
      <div class="message"></div>
    </div>

【讨论】：

【解决方案3】：

与这个问题不太相关，但我希望这个答案能节省别人的时间

对于使用引导程序的人。将图像保存在容器中，再次检查它是否在class="container" 中，我有一个错字，我写了classs 而不是class，背景图像不适合。

第二，关闭之前的div。

第三，如果你不使用容器并且只以<div class='row'></div>开头，背景图片将不适合。

工作示例：

<div class="container" style="background-image: url('img'); background-size: cover;">
  <div class="row">
  </div>
</div>

【讨论】：

【解决方案4】：

只需在 css 中添加 background-size: 封面代码即可解决问题。

.background {
    background-image: url(some image);
    background-size: cover;
    background-repeat: repeat-x;
    background-position-y: bottom;
}
html, body, .background {
    height: 100%;
}

【讨论】：

【解决方案5】：

我很好奇 CSS 单元 vw（视图宽度）是否会完成您尝试使用 width: 100% 执行的操作

试试width: 100%，而不是width: 100vw

https://www.w3schools.com/cssref/css_units.asp

【讨论】：