将 2 张图像作为背景放置在一个身体上答案

【问题标题】：Placement of 2 images as the background on one body将 2 张图像作为背景放置在一个身体上
【发布时间】：2012-03-11 15:25:14
【问题描述】：

尊敬的访客stackoverflow！

我不能解决一个简单的问题：给定图片背景的正文 "1.jpg"（它会自动压在页眉上），我仍然需要放一张图片 - "2.jpg" 被压在与页脚相反的位置。也就是说，我需要一些高度的“橡胶布局”，这样当页面高度很大时图像会滑动，而当内容不够时就会出现。我很乐意链接一个工作示例（甚至不是演示，而只是我自己查看源代码的网站），但至少我会感谢通常的建议和想法！提前谢谢你。

抱歉英语不好，我试着写得很好。

更新：

非常感谢您的回答。不注意我什么只选了一个，你帮了我，谢谢大家！

【问题讨论】：

标签： html css image background background-image

【解决方案1】：

使用 css 将图像 1.jpg 放在正文背景中，将 2.jpg 放在页脚背景中。

我不知道你的图片尺寸是多少，所以你可以查看下面的链接以获得一些帮助 -

http://css-tricks.com/snippets/css/fixed-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：

【解决方案2】：

您可以使用 CSS3 实现这一点：

body {
    background: url("1.jpg") top left,
        url("2.jpg") bottom right;
}

如果您需要支持旧版浏览器 (See here for current support)，则必须为第二张图片使用标签。

【讨论】：

@user1103744 不客气。一旦您确认这对您有帮助，请点击绿色勾号将帖子标记为已接受。

【解决方案3】：

对于完整的浏览器支持，我会在<body> 上设置一个图像，然后在站点容器上设置另一个图像，例如<div id="site">

HTML

<html>
  <head>
    <title>Title!</title>
  </head>
<body>
  <div id="site">
    [Your website here]
  </div>
</body>

CSS

body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}

【讨论】：