100％身高的背景圖片：需要填寫頁面

我有一個小的.png文件，重複形成背景圖片。我需要將我的頁面的高度body設置爲100％，以便在我的內容包裝上使用最小高度屬性。但是，嘗試將背景圖像與height:100%結合使用會導致圖像在滾動頁面時被切斷。見圖片來闡述我的意思：在上面 enter image description here 100％身高的背景圖片：需要填寫頁面

背景，但滾動時被切斷

如何獲得的背景圖像重複了整個網頁，即使用戶向下滾動後？這裏是css：

body { 
    background-color:#9AAEBF; 
    overflow-y:scroll; 
    height:100%; 
} 

html:after { 
    background-image: url('http://www.example.com/img/background.png');  
    opacity:0.4; 
    content: ""; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

感謝您的想法。

編輯：

這是我需要重複的圖像：

Image Repeated

這裏是一個小提琴：

http://jsfiddle.net/Nick_B/x2h3g/

來源

2013-03-04 Nick B

是否有您要附加與CSS-僞選擇'後臺具體原因：after'？這在許多較舊的瀏覽器上不起作用。另外我想知道爲什麼它被絕對定位。我只是簡單地將background-img放在body標籤中，甚至放在頁面上的第一個容器div上。 – Philzen 2013-03-04 05:35:39

我不在乎舊的瀏覽器。我在'後面'使用'因爲這是你可以在不影響子元素的情況下對'html'元素使用不透明度。請參閱：http://css-tricks.com/snippets/css/transparent-background-images/ – 2013-03-04 05:42:26

試試這個

html:after { 
    background-image: url('http://www.example.com/img/background.png');  
    background-repeat:repeat; 
    opacity:0.4; 
    content: ""; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

來源

2013-03-04 05:36:37 jhunlio

我認爲圖像已經從問題文本的內容中重複出現。 – Philzen 2013-03-04 05:38:48

是的，真@Philzen。這不是我的問題的解決方案。 – 2013-03-04 05:43:46

如果你想讓它在你的整個頁面中創建一個背景圖片，只需簡單地在body中添加'body {body} {url（'http://www.example.com/img/background.png'）; background-repeat：repeat; }' – jhunlio 2013-03-04 05:48:41

現在使用到background-size

由於這樣

body { 
    background-color:#9AAEBF; 
    overflow-y:scroll; 
    height:100%; 
} 

html:after { 
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%; 
    opacity:0.4; 
    content: ""; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

Demo Full page

Live Demo

來源

2013-03-04 05:41:08

這不起作用。看到上面的提琴幫助任何想法。謝謝！ – 2013-03-04 06:16:36

你可以達到你想要的結果通過給予backgroun-size:100%在html:after

CSS

html:after { 
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%; 
    opacity:0.4; 
    content: ""; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

來源

2013-03-04 05:42:24

這不起作用。因爲圖像很小且重複。看到上面的小提琴。謝謝！ – 2013-03-04 06:15:09

100％身高的背景圖片：需要填寫頁面

回答

相關問題