即使滚动，如何将背景图像保持在左下角答案

【问题标题】：How to keep background image on bottom left even scrolling即使滚动，如何将背景图像保持在左下角
【发布时间】：2010-07-14 03:35:13
【问题描述】：

我想知道即使用户滚动浏览器，是否有办法让我的背景图像一直保持在左下角。我当前的 css 可以在网站加载时在浏览器底部制作图像，但如果我滚动浏览器，它仍然会停留在同一位置。感谢您的帮助。

html, body 
{
background-image:url("backgroundBottom.png");
background-position:bottom left;
background-repeat:no-repeat;
background-attachement:fixed;   //I just add this, don't think this would work.
font-family:"Georgia, self";
font-size:"30px";
margin:0px;
height:100%;
text-align:center;
}

【问题讨论】：

标签： css position background-image

【解决方案1】：

您正在为 HTML 和 BODY 元素设置背景。

代码看起来不错，background-attachment: fixed 就是你需要的。

所以在简写 CSS 中，只需要写

body {
    background: url(backgroundBottom.png) bottom left no-repeat fixed;
}

【讨论】：

非常快速简单的修复..谢谢+1

【解决方案2】：

如果是没有重复的固定图片，我建议把它放在它自己的 div 标签中，该标签与图片的宽度和高度完全相同。

<div id="BackgroundImage"></div>

然后使用下面的 CSS

#BackgroundImage{position: fixed; width="xx"; height="yy"; bottom:0px; left:0px;}

显然是根据您的需求定制的

重点是position:fixed

生成一个绝对定位的元素，相对于浏览器窗口定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定

http://www.w3schools.com/Css/pr_class_position.asp

【讨论】：

呃，如果他把它添加到 html/body 元素中，将会发生非常有趣的事情。
在 body 上使用 background-attachment 比使用奇怪定位的元素更容易。更不用说固定位置已被报告在 IE 中无法正常工作。

【解决方案3】：

你使用了 background-attach*e*ment:fixed;

尝试更好地拼写，例如 background-attachment:fixed;

【讨论】：