如何讓我的背景圖片保留在頁面底部？

這是我的網站：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

如何讓我的背景圖片保留在頁面底部？

回答

相關問題