如何将背景图像保留在页面底部？

Question

如何将背景图像保留在页面底部？

Ale*_*fer 1 html css position background-image

这是我的网站: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>

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

提前致谢!

Answer 1

Sha*_*ads 6

你应该能够做到这一点,

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

Run Code Online (Sandbox Code Playgroud)

添加固定附件可确保在进行任何滚动时它保持在同一位置.

如果这不起作用你也可以尝试,

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，8 月前
查看次数：	12903 次
最近记录：	12 年，8 月前