Css當有2個bg圖像時，如何讓1延伸出網格

我正在創建一個簡單的網站，使用960網格，響應式框架調用'skeleton'，它工作正常，但我現在有一個問題，因爲我的標題橫幅只有960px，所以會出現一個尷尬的空白區域，兩邊都會延續960px。爲了解決這個問題，我已經分出了一個像素的圖像，然後我重複遍及x軸。Css當有2個bg圖像時，如何讓1延伸出網格

問題：由於.container將限制所有內容保持在960像素以內，因此我無法將page_home/section_header_bg.jpg延伸出960像素的限制。我試圖從.container div創建它，但它會導致2圖像不合並在一起。我希望他們內聯在一起。

它工作得很好，如果我沒有使用.container，但我的頭將不會響應。

問題：不知道如何獲得URL（page_home/section_header_bg.jpg）來擴展出960像素的限制，同時疊加使用bg主圖像填滿

HTML：

<div class="container"> 
    <header> 
    </header> 
</div>

CSS：

header { 
    background-image: 
    url(page_home/section_header.jpg), 
    url(page_home/section_header_bg.jpg); 
    background-repeat: no-repeat, repeat-x; 
    background-position: center, left; 
    min-height:200px; 
}

來源

2014-10-30 Devon

使用的包裝爲你的頭和頭後用容器（用於導航等）：

.head-wrap{ 
    width:100%; 
    background:yourbackground; 
} 

header{ 
    max-width:960px; 
    yourstyles; 
}

標記：

<div class="head-wrap"> 
    <header> 
    </header> 
</div> 
<div class="container"> 

</div>

這將是最乾淨的解決方案。否則，你將不得不放置一個位置：絕對在你的頭後面的div，並把背景樣式。然後，因爲您有一個min-height屬性，所以每當瀏覽器窗口重新調整時，您都需要使用javascript重新調整它的大小，因爲它不會像標題那樣按比例縮放，因爲它沒有內容。剛拿到的想法：

<div class="yourbackgrounddiv"></div> 
<div class="container"> 
    <header> 
    </header> 
</div> 

.yourbackgrounddiv{ 
    position:absolute; 
    top:0; 
    width:100%; 
    min-height:200px; 
    yourstyles; 
}

來源

2014-10-30 06:58:20

感謝它現在的工作 – Devon 2014-10-30 07:25:26

很高興我能幫到你 – 2014-10-30 07:27:39

您可以使用媒體查詢一招，我認爲你需要1px的圖像僅在桌面的情況下不與手持設備。有了這個，你可以進一步發揮。

只需在位置：絕對的容器上方創建一個bg div。

這將爲你工作。

謝謝

來源

2014-10-30 07:01:37

Css當有2個bg圖像時，如何讓1延伸出網格

回答

相關問題