背景图像水平拉伸答案

【问题标题】：Background image stretch horizontally背景图像水平拉伸
【发布时间】：2013-01-24 23:53:41
【问题描述】：

我的网站有一个水平滚动结构并且它是响应式的。例如。我的网站宽度：屏幕上的 9600 像素。

我有一张背景图片。打开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%;
}

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

【问题讨论】：

能否请您在 jsfiddle 中发布您的所有代码，包括对图像的在线参考？

标签： javascript jquery image css stretch

【解决方案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>

【讨论】：

是的，我试过了，但没有用。我不想在屏幕上拉伸。我想在所有网站主体上伸展。例如。不是 1600px，想要 9600px。

【解决方案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;
}

【讨论】：

【解决方案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>

然后它显示如下图像....

【讨论】：

太好了，但你认为：我的 bg 10000 像素，我想水平退出浏览器。喜欢溢出选项。