固定宽度中心，动态左右背景图像列

Question

我发现有几种方法可以做我想要的，但我不确定究竟是最好的还是首选的方法来做到这一点.. 。基本上我想拥有1000px固定宽度的#main div，然后在左侧和右侧，我希望有两个单独的图像，如果分辨率足够大，可以填充更多宽度，但如果不是图像不计数朝向文档宽度。希望这是有道理的。有什么建议么？

Answer 1

你可以制作背景图像（比如说bg.jpg）1400px的宽度。将左右图像放在这个bg.jpg上。

左边的图片最左边，右边的图片右边最右边的bg.jpg。最后你只会有1张图片，那就是bg.jpg。

如果你的主包装是中心对齐的，那么你可以添加CSS到正文，所以背景图像也是中心对齐。但主包装不会覆盖左右图像。

body{ 
background-image: url("bg.jpg") center 0 no-repeat; 
} 

Answer 2

假设您的两面图像宽度均为200px，因此如果视口宽度超过1400px，您只想显示它们。

您可以使用CSS媒体查询来做到这一点。

.side-img { 
    display: none; 
} 

@media screen and (min-width: 1400px) { 
    .side-img { 
     display: block; 
    } 
} 

记住，一些旧的浏览器（IE 7，8）不明白媒体查询，所以侧面的图像绝不会在这些浏览器中显示。

如果这是一个问题，那么你可能更喜欢一个基于JavaScript的解决方案，沿着这jQuery函数线的东西：你为什么不设置这两个图像作为背景图片

$(window).bind('resize',function(e){ 
    calcWidth(); // Called whenever window is resized. 
}); 

function calcWidth(){  
    var sideImgs = $('.side-img'); 
    var winW = $(window).width(); 
    if (winW > 1400){ 
     sideImgs.css('display', 'block'); 
    } else { 
     sideImgs.css('display', 'none'); 
    } 
} 

calcWidth();​ // Run this on page load. 

Answer 3

：（很简单）

background-image: url("background_one.png"), url("background_two.png"); 
background-position: left top, right top; 
background-repeat: no-repeat;