Question

亲爱的访客stackoverflow！

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

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

更新

非常感谢您的回答。不要注意我的意思只选了一个，你帮了我，我谢谢你们！

Answer 1

在页脚背景中使用css和2.jpg将你的图像1.jpg放在身体背景中。

我不知道您图片的大小是什么，所以您可以看到以下链接以获得一些帮助 -

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

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

Answer 2

您可以使用CSS3实现此目的：

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

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

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

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

3 个答案: