如何将背景图像保持在左下方甚至滚动

时间:2010-07-14 03:35:13

标签: css position background-image

我想知道是否有办法让我的背景图像始终保持在左下方,即使用户滚动浏览器也是如此。我当前的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;
}

3 个答案:

答案 0 :(得分:20)

您正在设置HTML和&amp ;;身体元素。

代码看起来不错,背景附件:固定就是你需要的。

所以用简写的CSS,只需写

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

答案 1 :(得分:3)

如果它是一个没有重复的固定图像,我建议将它放在它自己的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

答案 2 :(得分:1)

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

尝试拼写它更像background-attachment:fixed;