如何在使用網格時獲得背景圖像以擴展全寬？

是否有可能讓包裝元素的背景圖像超出網格而保持響應？如何在使用網格時獲得背景圖像以擴展全寬？

我能夠用純色使用盒子陰影技術來做到這一點，但是我一直沒有能夠獲得背景圖像來突破網格。

我正在使用12列靈活的，基於百分比的網格，其最大寬度爲1140px，並將列浮動。設置包裹元素的背景圖像最終爲1140px，除非我給元素設置了一個絕對寬度（如150％），這會打破響應性，而且我確信無論如何都是不好的做法。

我的佈局很簡單，像這樣

<body> 
    <container> 
     <header></header> 
     <inner-content> 
      <grid-element-one></div> 
      <bg-wrap> 
       <grid-element-two></div> 
      </div> 
      <grid-element-three></div> 
     </inner-content> 
     <footer></footer> 
    </container> 
</body>

而且它奠定了哪裏，我需要有背景圖像元素在其他網格部分之間。所以我不能把它放在頁腳之上，並在網格受到影響之前讓網格結束。

該CSS也是裸露的骨頭。

.inner-content { 
    max-width: 1140px; /* when 768px+, otherwise 96% */ 
} 
.element-two { 
    color: $font-color; 
    background-color: $bg-gray; 
    box-shadow: -25rem 0 0 $bg-gray, 25rem 0 0 $bg-gray; 
    height: 475px; 
} 
.bg-wrap { 
    background: url(../images/bg/texture.png) 0 80px repeat;    
}

來源

2013-10-28 Jackie

我在想一個僞元素，如：之前可能會做，但我已經使用了他們的經驗有限，我不知道如何寫。 – Jackie

你有可能創造一個小提琴來看看你到底想要什麼嗎？ – ajc

@ajc - 這是一個小提琴http://jsfiddle.net/mPGQQ/ – Jackie

這是你想要的嗎？ http://jsfiddle.net/mPGQQ/7/

如果是，您必須將div class="inner-content"的末尾移動到末尾，然後像在小提琴中那樣修改css的.inner-content。

希望這有助於

乾杯

來源

2013-10-28 08:34:07 phron

不完全是。我只希望背景適用於一個div。像這樣，但是它是藍色的，我希望能夠使用bg圖像：http://jsfiddle.net/jackiesc/mPGQQ/8/ – Jackie

另外，因爲所有東西都在同一個網格上，所以我不能只移動inner-content div，而不會讓所有其他東西變得歪斜。 – Jackie

好的，這是一個足夠滿足您的需求http://jsfiddle.net/mPGQQ/35/？您可能無法使用百分比或大小，但我認爲這與您期望的結果非常接近。 – phron

如何在使用網格時獲得背景圖像以擴展全寬？

回答

相關問題