html - 如何将背景图片保留在页面底部?

标签 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>

CSS

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

提前致谢!

最佳答案

你应该可以这样做,

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

添加附件 fixed 确保它在发生任何滚动时保持在同一个位置。

如果这样不行你也可以试试,

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

关于html - 如何将背景图片保留在页面底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15098491/

相关文章:

javascript - Z-index 似乎没有任何改变

html - 如何正确地重新定义 FireFox 的 CSS 设置?

html - 响应式设计 : Is it better to hide or to change position of elements?

jquery - 修复除一个主要内容 div 之外的整个页面

html - 当转换反转时,CSS 的转换延迟可以被禁用/更改吗?

html - 重新调整屏幕大小时使图像与父容器一起缩放

jquery - 覆盖子容器上的绝对位置(模态窗口)

html - 如何在 css 中将屏幕划分为这些 div?

html - 我怎样才能像这样定位图像?

html - 使用 flex 将 div 移向右侧