Question

我问了question这个特定于我的代码的内容，人们真的很有帮助，所以我选择了更成功的答案，即使我没有解决我的问题。

我正在努力获得像livingsocial一样的大型CSS背景。
我的图片是1400 x 1050
我目前的分辨率为：1280 X 1024
我的图片不断从底部被切断

问题（S）：什么是使用CSS显示大图像背景的最佳方式？

我是否需要以4种不同的分辨率获得相同的背景图像，然后使用最适合用户当前分辨率的图像（是否有一些脚本）？
我是否只需要一张我用css继续缩放的大图片
其他人如何解决这个问题？

我很想知道这样做的最佳方法是什么，以便在上述三个选项中的所有分辨率下都能正常工作。

Answer 1

CSS3解决方案 您可以在CSS3中使用background-origin和background-size，但IE8及更低版本不支持它。

PHP解决方案 您可以使GD2扩展特定于用户浏览器的图像，此解决方案也将涉及JavaScript。

生活社交方式 他们正在插入带有<img/>标记的图片并将其定位。

<style type="text/css">
#background {
    z-index: -1; /* put it under everything*/
    position: fixed; /* make it stay in the same place, regardless of scrolling */
    top: 0;
    left: 0;
    overflow: hidden; /* clip the image */
    width: 100%; /* fill the full width of browser */
    min-height: 950px; /* show at least this much of the image */
}
#background img {
    width: 100%;
}
</style>

<body>
    <div id="background"><img /></div>
    <div id="content"><!-- Your Content Here --></div>
</body>

Living Social有更多的代码应用于他们的<img/>标签，但它似乎有点多余，也许是为了更好的跨浏览器支持，我没有在这里展示。

Answer 2

我不知道一种能够实现crossbrowser背景的CSS方法..它实际上适用于较低的版本。

但是有一些jquery插件，就像这个：

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

Answer 3

尝试指定img的宽度和高度，然后在两侧切割图像的中心。否则，您的图像将根据屏幕尺寸被切断;如果您将其大小设置为与屏幕尺寸相匹配，则延长。

Answer 4

Google：css自动调整背景图片 http://css-tricks.com/3458-perfect-full-page-background-image/

Answer 5

我决定再次回答这个问题，考虑到不同的要求，两者都是有效的;但是，如果您不要想要在底部切断图像，这个问题就会明确解决。

DEMO： http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css">
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
}
#contentContainer {
    position: relative;
    width: 500px;
    height: 500px;
}
#theContent {
    /* this is all pretty much just to make it look good, nothing important in here */
    position: absolute;
    top: 200px;
    left: 200px;
    background: #FFF;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    border-radius: 6px;
    padding: 10px;
}
</style>

<div id="contentContainer">
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
    <div id="theContent">This is the content</div>
</div>

Answer 6

我只是将代码从生活社交中删除，并认为如果我把它放在这里会很方便：

<div id="landing-page-container">
  <div id="background-container">
    <div>
      <img alt="background" id="background" src="files/background.jpg">

    </div>
  </div>

</div>
<div class="container"></div>

这是你的css：

html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}

当然你需要提供你的background.jpg

什么是在css上显示大背景图像的好方法

6 个答案: