Question

我目前正在定位一个高度较小但宽度较大的背景图片，以便在浏览器中一直延伸。当我做背景尺寸封面时，我只能实现这一点，但是当我为封面以外的图像设置一定尺寸时，我无法实现这一点。我尝试了背景repeat-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%;
}

Answer 1

它使用background-size：100％;

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

}

Answer 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>

Answer 3

与这个问题不是很相关，但是我希望这个答案可以节省别人的时间

适用于使用引导程序的人员。将图像保留在容器中，再次检查图像是否位于class="container"内，是否有错字，我写了classs而不是课堂，背景图像不合适。

第二，关闭上一个div。

第三，如果您不使用容器而仅以<div class='row'></div>开头，则背景图片将不合适。

工作示例：

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

Answer 4

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

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

Answer 5

我很好奇CSS单位vw（视图宽度）是否会完成您尝试使用width: 100%

的操作

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

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

背景图像没有占据全宽

5 个答案: