Question

好的，我一直在努力解决这个问题 years 。我尝试了很多不同的解决方案，但发现自己再次面临同样的问题，我真的想请社群寻找最好的方法来解决这个问题。

我希望在我的页面背景上有两个图像：1作为xy平铺的“纹理”，另一个图像将拥抱整个页面的右下角，无论页面高度。因此，页面将如下所示：

enter image description here

这不是通过我的CSS中的背景img（）完成的，而是在页脚附近有一个图像，如下所示：

<style>
.specialImage{
  position: absolute;
  bottom:0;
  right:0;
  z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />

问题在于，如果页面比屏幕长，则会发生这种情况：

enter image description here

不好。将位置改为“固定”会导致它具有“粘性”效果，这是我不想要的。所以这条道路是不行的。

路线2：CSS后台解决方案。不幸的是，这段代码不起作用：

body {
  color: #333333;
  background: 
    url("/static/assets/img/fabric_1.png"),
    url("/static/assets/img/stain.png");

  background-repeat: repeat,
    no-repeat;

  background-position: 0 0,
  right bottom;
}

所以，我试过这个：

   html{
     background:
     url("/static/assets/img/fabric_1.png");
     background-repeat: repeat;
     background-position: 0 0;
   }

   body {
     background:
       url("/static/assets/img/stain.png");

     background-repeat:
                no-repeat;

     background-position:
                right bottom;

   }

其中，对于长页面，有效！万岁！但是，当我回到短篇页面时，现在它看起来像这样：

enter image description here

狗娘养<！/ em>的

那么解决方案是什么？粘性页脚？民高度？包装？到目前为止，我尝试过的解决方案都没有在两种情况下产生所需的行为。

StackOverflow长老，我该怎么办？

谢谢！ [R

Answer 1

据我所知，你想把背景图片粘到底部和右边？所以解决方案是：

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }

Answer 2

嗯，使用css3你可以使用多个背景。你能试试吗？

html{
     background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
     background-repeat: repeat, no-repeat;
     background-position: 0 0, right bottom;
   }

   body {
     color: #333333;
   }

Answer 3

遇到同样的问题，我的解决方案涉及将html元素设置为最小高度为100％，高度为auto：

body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

较短的页面被强制为查看窗口高度，较长的页面会获取自动高度。

Answer 4

你总是可以将身体的高度设置为100％然后它应该有效。

澄清：然后你可以在html元素和body元素中有一个背景图像，就像你已经尝试过一样：

html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}

body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}

刚刚测试了一下，看起来它在IE10的Internet Explorer 5怪癖模式下不起作用，但我真的希望这对你来说不是一个破坏者，因为你似乎没有和一个奇怪的人一起工作传统产品。

紫色方块是html-background-image，红色是body-background-image。

The purple square is the html-background-image and the reddish is the body-background-image.

Answer 5

感谢您发帖。我遇到了同样的问题。我通过将背景图像添加到容器div来解决它，我的内容设置为100％宽度。容器在我的页脚之前关闭，但如果您需要将图像移到页面底部，也可以尝试将其放在页脚外部。我只想让我的内容走到右下角。

这是我的div结构：

<html>                    Background image
<body>                    Padding
<div id="outerWrapper">   Background applied outside content
<div id="borderWrapper">  Contains content
<div id="contentWrap">    Sets up container positioning for child elements

HTML / CSS：将第二个背景图像与页面右下角对齐

5 个答案: