使用粘性頁腳的全屏幕背景？

我正在使用this tutorial創建全屏幕背景。 （更新：使用高度和寬度爲100％的圖像是不是我想要的，因爲這只是拉伸圖像，此腳本保持長寬比。）使用粘性頁腳的全屏幕背景？

我也試圖合併一個粘腳this tutorial。

添加粘頁腳部分是在背景圖像上創建一些額外的水平滾動。

我的圖像是700px x 466px，我的瀏覽器窗口是1240 x 1414.我的網站水平位於瀏覽器窗口的中間，但是可以在右側進行額外的滾動操作。

如何獲得全屏幕背景圖像與粘腳的工作，以便它消除額外的水平滾動？粘性頁腳需要位於不低於其背景圖像的頂部。

更新：使用Supr的答案來解決水平問題，唯一要解決的問題是頁腳位於背景圖片下方而不是頂部。

這是我的CSS：

* { 
    margin:0; 
    } 

html, body { 
    height:100%; 
    } 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    } 

.footer, .push { 
    height: 4em; 
    } 

.clear { 
    clear:both; 
    } 

body { 
    font-size: 62.5%; /* Resets 1em to 10px */ 
    background-repeat:repeat-x; 
    background-image: url('images/background-repeat.jpg'); 
    margin:0px; 
    } 

#body { 
    width:1000px; 
    margin:0 auto 0 auto; 
    }   

.fullBg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#maincontent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 50; 
}

這裏是我的html：

<div class="wrapper"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background"> 
    <div id="maincontent"> 
     <div id="body"></div> 

     <div class="push"></div> 
    </div> 

    <div id="footer"> 
     <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p> 
    </div> 
</div>

來源

2012-02-02 Rob

，請告訴我們，頁面或添加代碼。 – Tim 2012-02-02 10:57:58

@Tim剛添加了代碼。 – Rob 2012-02-02 11:19:44

添加頁腳會導致水平滾動？只是一個未經測試的想法，但在嘗試加入的情況下

.wrapper { 
    overflow: hidden; 
}

，並可能

#footer { 
    overflow: hidden; 
}

有東西（保證金/填充）頁腳外溢出。

來源

2012-02-02 11:39:52 Supr

太好了，謝謝你解決了水平問題。我現在唯一的問題是頁腳坐落在背景圖片下面，而不是最上面。 – Rob 2012-02-02 12:02:02

嘗試'#footer {position：relative;}'如果這與您使用頁腳的方式不相沖突。 – Supr 2012-02-02 12:13:59

請參閱http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp – Supr 2012-02-02 12:16:58

沒有看到你的代碼，這是很難回答的，但在螢火/ WebKit的開發人員工具檢查CSS溢出html和body元素上的其他顯示屬性以及包裝內容的其他元素。它很可能有一個溢出：在那裏需要設置溢出的自動：hidden;

來源

2012-02-02 10:59:46 wheresrhys

只需在我的問題中添加代碼即可。 – Rob 2012-02-02 11:20:04

大多數元素都有溢出：自動作爲默認設置，因此請嘗試設置溢出：隱藏在正文和html上 – wheresrhys 2012-02-02 11:31:38

看看您的代碼，它可能與#mainContent和#body以奇怪的方式碰撞的樣式有關 – wheresrhys 2012-02-02 11:43:05

咦？你爲什麼要這麼麻煩？您還沒有給出任何分析代碼，但我相信你以後是這樣的：

body { 
    margin: 0; 
    background: url(folderInRootDirectory/myimage.jpg) no-repeat center center; 
    background-size: cover; 
}

或替代方案，不使用CSS3，IE8的兼容性：

#bg_img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: -99999999999999; 
} 
body { 
    margin: 0; 
    min-width: 100%; 
    min-height: 100%; 
}

加HTML ：

<body> 
    <img id="bg_img" src="MYURL.JPG" /> 
    <!-- content --> 
</body>

來源

2012-02-02 11:14:57 lpd

需要它在IE8中工作，這樣就排除了答案的第一部分。此外，您的答案的第二部分只是將圖像延伸至100％的寬度和高度。全屏幕背景腳本保持圖像的高寬比，並使其充滿屏幕，這是一種非常不同的結果。 – Rob 2012-02-02 11:17:08

我推測這是你想要的「全屏」背景圖像。你想要圖像溢出，即部分隱藏，或減小尺寸以適應容器？ – lpd 2012-02-02 11:21:00

我發現這是創建額外滾動的粘性頁腳。如果可能，我想溢出：隱藏;因爲這隻會填充瀏覽器窗口。我已經添加了我的代碼。 – Rob 2012-02-02 11:23:32

試試這個夥伴爲主體元素，

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    background: none repeat scroll 0 0 transparent; 
    border: 0 none; 
    outline: 0 none; 
    vertical-align: baseline; 
} 
body { 
    color: #404040; 
} 

body { 
    background: url("../design/bg.gif") repeat-x scroll 0 0 #FFFFFF; 
    font: 0.8em/1.5 "arial",sans-serif; 
}

來源

2012-02-02 12:16:34 Guru

乾杯，但我不認爲這將工作，因爲沒有什麼可以調整背景圖像的大小並保持高寬比。 – Rob 2012-02-02 13:54:03

使用粘性頁腳的全屏幕背景？

回答

相關問題