延伸超過包裹的背景圖像圖案一面

我有這樣一個頁腳：延伸超過包裹的背景圖像圖案一面

<div class="footer homePage-footer"> 
    <div class="wrap footer-wrap"> 

     <div class="phone-call-out"></div> 

     <div class="estimate-call-out"></div> 

    </div><!-- end .wrap .footer-wrap --> 
</div><!-- end .homePage-footer -->

我需要一個堅實的背景色爲「電話呼叫出」分區和重複「估價 - 召集」分部的模式。由於它們在包裝內，是否有一種方法可以將重複圖案延伸到包裝寬度之外並保持另一半的固定背景色？

Here is a visualization of what I have now。添加白色邊框可以輕鬆顯示包裝的結束位置。我需要這種模式來無限重複瀏覽器的邊緣，而不是像現在那樣受限於包裝。

感謝您的期待。

來源

2013-03-05 Ben Tinsley

我有麻煩形象化你希望做什麼......這是正確的：你想重複圖案，以超出包裝的右邊緣。但是你希望通過電話呼叫將它綁定在左邊。並且電話呼叫被包裹留下，並且不會超出它。那是對的嗎？ – jmeas 2013-03-05 01:18:38

如果我正確地理解了你，這可能是你在追求的。 View it on JSFiddle

CSS

.wrap { 
    width: 150px; 
    height: 30px; 
    border: 1px solid #2f6497; 
    position: relative; 
} 
.phone-call-out { 
    background: #eee; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.estimate-call-out { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 300px; 
    background: #bbb; 
    height: 100%; 
}

來源

2013-03-05 01:24:54 jmeas

延伸超過包裹的背景圖像圖案一面

回答

相關問題