CSS對齊 - 限制重複-x

-1

我是新來建設的網站，我試圖解決一些簡單的問題在我的網站上。此刻我有了沿着使用以下CSS x軸重複圖像的導航包裝：CSS對齊 - 限制重複-x

#header { 
    width:100%; - If I change this to a lower value, the header goes to the left 
    background:url(images/bg-header.png); 
    height:130px; 
    margin-bottom:15px; 
}

的唯一的事情是BG-header.png將整個頁面寬度去（這從這個代碼我可以看到爲什麼它這樣做。我怎麼能改變這塊CSS，所以圖像仍然適用，但它只能從頁面中心延伸250px的方框？

來源

2012-03-22 MrDKOz

在框中的方向......難道你的意思是兩者兼而有之？「從頁面中心」是什麼意思？ – 2012-03-22 22:29:09

對不起，例如<------- x --------> x是頁面的中心，並將圖像設置爲以某種方式在點x的兩個方向上重複250px。 – MrDKOz 2012-03-22 22:34:46

您可以添加元素（如清空DIV）或生成的內容（:before/:after），爲其設置所需的尺寸並將其完全放置在您的#header元素的內部。

例如：

#header {margin-bottom: 15px; position: relative; height: 130px; } 

#header:after { 
    background: url(/images/bg-header.png) repeat-x; 
    content: ""; 
    margin-left: -125px; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    /* bottom: 0; */ /* This is unneeded. */ 
    width: 250px; 
    height: 130px; 
    /* z-index: -1; */ /* This is unneeded. Content can be positioned itself. */ 
}

（不需要的片段不是我加入，標誌着由我作爲不需要）

來源

2012-03-22 22:31:11

非常感謝您的支持。它幫助了很多，現在它正在工作。我需要對頁腳也做同樣的事情，所以我會把你在這裏給我看的東西加以應用。再次感謝。 – MrDKOz 2012-03-22 22:55:51

FWIW：如果您的標題根本沒有內容（儘管不太可能），您可以將寬度應用於標題本身，然後使用「margin：0 auto」居中。 – 2012-03-22 23:13:36

CSS對齊 - 限制重複-x

回答

相關問題