Question

我正在处理的网站Tamsnails.com刚刚完成，但它有一个问题我已经被困扰了一段时间了。商店的背景图片将无法延伸到我的高分辨率工作笔记本电脑的全屏幕。在过去的几个月里，我尝试过很多东西，其中很多都是我忘记的，但是

我记得起初，我把它作为一个真正的css background-img

然后，我有

<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>

with mainbackground style

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

现在，我有

<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">

带风格

#mainBackgrond {
    height: 50em;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

因为这至少在我的家用笔记本电脑上看起来不错。

是的，我知道拼错'mainBackgrond'错了..在这里忍受我！

Answer 1

如果问题是图片没有延伸到窗口底部（这是我在Chrome中看到的），请将height: 50em样式上的#mainBackgrond更改为：< / p>

height: 100%;

Answer 2

我认为你不能，除非你想使用HTML 5。

如果您可以接受，请参阅：css scaled background image。

编辑：仅供参考，使用“高度：100％”延伸至内容高度的100％，而不是窗口。

Answer 3

你可能想看看这个（或其他类似的jquery插件）

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - 使用起来非常简单，它可以完全拉伸背景图像，而不会有纵横比的风险。

Answer 4

尝试删除height属性，这样它将保持纵横比并在整个屏幕上一直拉伸，如果这是意图。

#mainBackgrond {
  position: fixed;
  z-index: -1;
  width: 100%;
  left: 0px;
  top: 0px;
  background: url(/background_image.JPG) no-repeat center center fixed;
}

背景图像本身很大，并且初始加载时间非常慢，您应该考虑更多地压缩它或调整大小。

另请参阅css media query这是一种很好的方式，可以为屏幕较小的用户显示不同大小的背景图片，这些用户甚至可能无法看到背景的分辨率。

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

居中CSS背景图片

4 个答案: