javascript - 背景图像水平拉伸(stretch)

Question

我的网站有水平滚动结构并且具有响应能力。例如。我的网站宽度:屏幕上的宽度为 9600px。

我有一个背景图片。打开body后是这样的:

<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%;
}

我有，根据屏幕拉伸(stretch)这个背景图片。我的 CSS 代码不起作用。我如何通过 JavaScript 或 CSS 做到这一点？

Answer 1

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

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

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

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