Html 背景图像未占据全部宽度_Html_Css

Html 背景图像未占据全部宽度

html css

Html 背景图像未占据全部宽度,html,css,Html,Css,我目前正在定位一个背景图像，它的高度很小，但宽度很大，可以一直延伸到整个浏览器。我只能在制作背景尺寸封面时实现这一点，但在为封面以外的图像设置特定尺寸时无法实现。我尝试了背景重复-x，但似乎也不起作用 <html> <body> <div class="background"> <div class=“header”></div> //some content </div>

我目前正在定位一个背景图像，它的高度很小，但宽度很大，可以一直延伸到整个浏览器。我只能在制作背景尺寸封面时实现这一点，但在为封面以外的图像设置特定尺寸时无法实现。我尝试了背景重复-x，但似乎也不起作用

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

我很好奇CSS单元

vw

（视图宽度）是否能完成您试图使用

width:100%

请尝试

宽度：100vw

它正在使用背景大小：100%

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

}

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

适用于使用引导的用户。将图像保存在一个容器中，再次检查它是否在

class=“container”

中，我有一个打字错误，我写了

classs

而不是class，背景图像不适合

第二个，关闭上一个div

第三个，如果不使用容器，只从

开始，背景图像将不适合

工作示例：

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

只需添加背景尺寸：css中的封面代码即可解决此问题

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

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

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

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