背景图像水平拉伸

Question

我的网站有一个水平滚动结构，并且响应迅速。例如。我的网站宽度：9600px在我的屏幕上。

我有一张背景图片。打开身体后像这样：

<div class="bg">
  <img class="bg-st" src="themes/bc/images/bc-bg.png"> 
</div>

和CSS：

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
}
.bg-st {
width:100%;
height:100%;
}

我有，根据屏幕拉伸这个背景图像。我的CSS代码不起作用。我怎么能通过JavaScript或CSS来做到这一点？

Answer 1

要设置页面正文背景，请尝试以下CSS

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
} 

如果您想要拉伸图片并将其设置为全屏，请尝试以下操作...

#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}

<div class="bg">
  <img id="imgbg" src="themes/bc/images/bc-bg.png"> 
</div>

Answer 2

您可以将其设置为div的背景，并将background-size属性设置为覆盖：

.bg {
bottom: 15;
position: absolute;
z-index: 1;
width:100%
height:100%
background: url("themes/bc/images/bc-bg.png") no-repeat left fixed;
background-size: cover;
}

Answer 3

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

它显示了这样的输出

如果您使用以下代码

<style>
#imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}
</style>

<div class="main">
    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa    aaaaa
<div class="bg">
  <img id="imgbg" src="image.jpg">
</div>

然后它显示下面的图像....