延伸超过包裹的背景图像图案一面

我有这样一个页脚：延伸超过包裹的背景图像图案一面

<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

延伸超过包裹的背景图像图案一面

回答

相关问题