如何让我的背景图片保留在页面底部？

这是我的网站：http://www.alexklinghoffer.com/如何让我的背景图片保留在页面底部？

如何让背景图像保持在底部？如果您将浏览器窗口缩小一点，图像会向上飘移，但我希望将其保留在右下角。这是我的代码：

HTML：

<body> 

<div class="logo"> 
    <a href="http://www.alexklinghoffer.com"><img id="logo" src="images/aklogowhite.png" alt="Alex Klinghoffer Logo"/></a> 
</div> 

<div id="dock"> 
    <ul> 
     <li><a href="/index.html"><span>&#160;Home&#160;</span><img src="images/home.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="/bio.html"><span>&#160;Bio&#160;</span><img src="images/bio.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="/resume.html"><span>&#160;Resume&#160;</span><img src="images/resume.png" alt="[photo]" /></a></li><!-- 
     --><li class="active"><a href="/collections.html"><span>&#160;Collections&#160;</span><img src="images/collections.png" alt="[photo]" /></a></li><!-- 
     --><li class="active"><a href="/references.html"><span>&#160;References&#160;</span><img src="images/references.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="/contact.html"><span>&#160;Contact&#160;</span><img src="images/email.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="/blog.html"><span>&#160;Blog&#160;</span><img src="images/blog.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="http://www.facebook.com/alexklinghoffer"><span>&#160;Facebook&#160;</span><img src="images/facebook.png" alt="[photo]" /></a></li><!-- 
     --><li><a href="http://www.linkedin.com/in/alexklinghoffer"><span>&#160;LinkedIn&#160;</span><img src="images/linkedin.png" alt="[photo]" /></a></li> 
    </ul> 
</div> 

<div id="content"> 

</div> 

<div id="footer"> 
    <p>&copy; 2013 <a href="http://www.alexklinghoffer.com">Alex Klinghoffer</a></p> 
</div><!--//footer--> 

</body> 
</html>

CSS

body { 
    background: url("images/background.png"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-color: #111111; 
    padding: 0; 
    margin: 0; 
}

提前感谢！

来源

2013-02-26 Alex Klinghoffer

你应该能够这样做是为了做到这一点，

background-attachment:fixed; 
background-position:center bottom;

添加固定附件，确保它保持在同一个地方时，任何滚动发生。

如果无法工作，你也可以尝试，

html {height: 100%;} 
body { 
    background-position: 0% 100%; 
    background-attachment: fixed; 
}

来源

2013-02-26 20:44:01 ShaShads

试试这个在你的CSS：

background-position: center bottom;

来源

2013-02-26 20:24:04 Lowkase

我该如何尝试？ OP没有在帖子中提供jsfiddle。如果它不起作用，只是简单说明一下。 – Lowkase 2013-02-26 20:31:18

是的，它不起作用。任何其他想法？ – 2013-02-26 20:33:29

尝试使用

background-position: right bottom;

为Lowkase建议。但要让它在Firefox和Opera工作，你还应该设置

background-attachment: fixed;

它为我或我不明白你的问题。

来源

2013-02-26 20:37:38

此代码让它在Firebug（Firefox）中工作。添加以下样式：

<style type="text/css"> 
html { 
    height: 100%; 
} 

body { 
    background-position: 50% 100%; 
} 
</style>

来源

2013-02-26 20:39:36 kjetilh

只需使用基本的CSS代码..

{ 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:right bottom; 
}

如果你想选择一些其他梅托德用于定位您的图片，你可以请访问：w3 schools网站，看看哪个选项最适合你（w3家伙的工作真的很好）。希望你找到解决方案。干杯!

来源

2013-02-26 22:30:39 Casper

如何让我的背景图片保留在页面底部？

回答

相关问题