HTML/CSS：將第二個背景圖像對齊到頁面右下角

好吧，我一直試圖解決這個問題年。我嘗試了許多不同的解決方案，但是發現自己又面臨同樣的問題，我真的很想問社區解決這個問題的方法。HTML/CSS：將第二個背景圖像對齊到頁面右下角

我想在我的頁面背景上有兩個圖像：1作爲xy平鋪的「紋理」，另一個圖像將擁抱整個頁面的右下角，而不管頁面高度如何。因此，頁面看起來就像這樣：

enter image description here

這不是通過一個背景IMG（）在我的CSS來實現，但與頁腳附近的圖像，像這樣：

<style> 
.specialImage{ 
    position: absolute; 
    bottom:0; 
    right:0; 
    z-index:-99; /* or higher/lower depending on other elements */ 
} 
</style> 
<img src="/static/assets/img/stain.png" class="specialImage" />

這裏的問題是，如果該頁面是長於屏幕，出現這種情況：

enter image description here

沒有好。將位置更改爲「固定」會導致其具有「粘性」效應，這是我不想要的。所以這條大道是不行的。

路由2：CSS後臺解決方案。不幸的是，這個代碼不工作：

body { 
    color: #333333; 
    background: 
    url("/static/assets/img/fabric_1.png"), 
    url("/static/assets/img/stain.png"); 

    background-repeat: repeat, 
    no-repeat; 

    background-position: 0 0, 
    right bottom; 
}

所以，我嘗試這樣做：

html{ 
    background: 
    url("/static/assets/img/fabric_1.png"); 
    background-repeat: repeat; 
    background-position: 0 0; 
    } 

    body { 
    background: 
     url("/static/assets/img/stain.png"); 

    background-repeat: 
       no-repeat; 

    background-position: 
       right bottom; 

    }

其中，對於很長的網頁，作品！萬歲！但是，當我回去的短頁面，現在它看起來像這樣：

enter image description here

狗孃養的！

那麼這裏有什麼解決方案？粘腳？民高度？包裝？迄今爲止我所嘗試的解決方案都不會在這兩種情況下產生所需的行爲。

StackOverflow長者，我該怎麼辦？

感謝！ [R

來源

2013-01-17 Rich Jones

@WeloSefer - 編輯了。無關緊要。 –

檢查[this]（http://jsbin.com/ebaxig/4/edit）out。你的CSS是正確的，但我認爲你錯過了一些結束標籤或你的主體內容沒有div封裝。 – WeloSefer

@WeloSefer - 在最終圖片中生成場景。另外，我相信你不是這麼做的，但你似乎已經包含了一些SEO垃圾郵件。 –

據我瞭解，你要堅持背景圖像底部和右側？這樣的解決方案是：

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }

來源

2013-01-17 06:44:57 Nikl

這會產生最後一張照片中顯示的行爲，這對於短頁而言不合意。但是，這適用於大於屏幕大小的頁面。 –

嗯，使用CSS3您可以使用多個背景。你可以試試這個嗎？

html{ 
    background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png"); 
    background-repeat: repeat, no-repeat; 
    background-position: 0 0, right bottom; 
    } 

    body { 
    color: #333333; 
    }

來源

2013-01-17 07:16:33 Tobi

這不起作用。 –

你總是可以設置機構，以100％的高度，那麼它應該工作。

澄清：然後你就可以在HTML元素和body元素的背景圖像，幾乎因爲你已經嘗試過媒體鏈接：

html { 
height: 100%; 
background: url(html.png) bottom right no-repeat; 
padding: 0; 
margin: 0; 
} 

body { 
padding: 0; 
margin: 0; 
height: 100%; 
background: url(body.png) bottom right no-repeat; 
}

只是測試一個多一點，而現在看來，這在IE10的Internet Explorer 5怪癖模式下不起作用，但我真的希望這不會對你有所幫助，因爲你似乎沒有使用奇怪的遺留產品。

紫色方塊是html背景圖像，紅色是身體背景圖像。

The purple square is the html-background-image and the reddish is the body-background-image.

來源

2013-01-17 11:10:03

這適用於第一種情況，但對於長度超過100％的頁面，會產生第二張圖像中顯示的情景。 –

嗯，如果多數民衆贊成的情況下，我不知道我明白這個問題，檢查了這一點：http：//dunderburken.eu/foo/藍/紫色的東西是一個背景圖像（重複），紅色也是一個圖像。我猜你想讓紅色在另一個地方？ –

運行到同一個問題，我的解決方案包括設置html元素有100％的最小高度與汽車的高度：

body, html { 
width:100%; 
height:auto; 
min-height:100%; 
margin: 0px; 
padding: 0px; 
} 

body { 
background-image: url(../images/bkgrnd-footer.jpg); 
background-repeat: no-repeat; 
background-position: bottom left; 
}

較短的頁面是被迫的查看窗口高度和較長的頁面會獲取自動高度。

來源

2013-08-02 14:56:41

謝謝發佈。我遇到了同樣的問題。我通過將背景圖像添加到容器div來解決這個問題，我的內容設置爲100％寬度。容器在我的頁腳之前關閉，但如果您需要將圖像放到頁面底部，也可以嘗試將它放在頁腳之外。我只想讓我的內容走到我的內容的右下角。

這裏是我的div結構：

來源

2014-03-16 16:40:30 Jennifer

格式化了一下。如果您想要更改，請點擊答案下方的[編輯]。我沒有重新訂購任何東西。在編寫時請注意編輯框頂部的*工具欄*。例如**'{}'**將突出顯示的文本推送到代碼塊中。（每行開始時增加4個空格。） – user13500

HTML/CSS：將第二個背景圖像對齊到頁面右下角

回答

相關問題