如何添加两个背景图像 - 左右从中心柱

Question

我有这样的CSS：

#wrapper1 { 
min-width:1020px; 
min-height:100%; 
} 
#wrapper2 { 
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; 
} 
#wrapper3 { 
width:1020px; 
margin:0 auto; 
} 

和这个网站：

<div id="wrapper1"> 
<div id="wrapper2"> 
    <div id="wrapper3" class="clearfix" <!-- content here --> 
     <p>blah blah blah</p> 
    </div> 
</div> 
</div> 

我需要添加2个图像 - 左右从中心列没有中心列宽的变化，并且图像不会影响页面的整体宽度。 例子：

我可以添加图片，并做了一些尝试

1. 当我试图改变浏览器的宽度 - 背景图片的中央纵队去下

2. 我试图改变min-width:1020px; to min-width:1665px; - 乍一看，一切都很好，但对于屏幕分辨率 - 小于1665px的所有内容都会右移 我尝试了一些选择，但没有成功

我的问题：сan我把图像，这样，当你改变浏览器的宽度 - 缩短距离的左侧和中心柱权（这是默认行为如果没有背景图片）

Here is code with images examples.

如果我让1个1020px铸坯中心部分大的图像，并把我的左/右图像进去..可以吗？

Answer 1

您可以按照倍数解决方案：

1）使用的div：[好]

创建一个好的div框架可以这样绿萼您的问题，比如像这样：

<div id="allWrapper"> 
<div id="leftSidebar"></div> 
<div id="centerOrContent"></div> 
<div id="rightSidebar"></div> 
</div> 

和CSS（未测试）的伪代码：

div#allWrapper{ 
width: 100%; 
heigt: 100%; 
} 
div#leftSidebar{ 
min-width: [theWidthOfLeftImage] px; 
height: 100%; 
background-image: url(leftImage.jpg); 
backround-position: center right; 
} 
etc... 

然后用CSS（浮动和大小）玩，你可以调整视图。

2）使用多重背景：不总是好]

你可以使用这个CSS伪代码使用倍数的背景（在这里找到：http://www.css3.info/preview/multiple-backgrounds/）

div#example1 { 
width: 500px; 
height: 250px; 
background-image: url(oneBackground), url(anotherBackground); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 
} 

3）使用静态“大“的形象：[懒惰的解决方案]

使用你建议的静态图像（中间空白）也可以解决问题，但如果w ebsite是“响应式”的，您可以使用不同屏幕分辨率的图形问题（或调整浏览器窗口大小）。 在这种情况下，您还必须修正中央列的位置和宽度（在窗口大小调整时）。

4）使用响应式设计：[！极好 - 这样做]

为了避免图像的中心（内容）的div重叠，你可以设置为背景色（这个div的）如白色。

同样，为了避免重叠，您可以设置一个“特殊”响应CSS。检测窗口是否有宽度< X 2个图像消失。比如这个CSS伪代码：

@media only screen and (min-width: 481px) { 
//here happens something when the screen size is >= 481px 
div#example { 
    background-image: url(oneBackground); 
} 
} 

@media only screen and (max-width: 481px) { 
//here happens something when the screen size is <= 481px 
div#example { 
    background-image: none; 
} 
} 

这里是一些链接关于响应式设计的网站上找到：

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

Answer 2

您可以使用两个背景的绝对DIV。一个左中心，另一个右中心：

将DIV放置在站点所需的任何位置。 （它们是绝对定位）

HTML：

<div class="background" id="background1"></div> 
<div class="background" id="background2"></div> 

CSS：

.background{ 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 

#background1{ 
    background: url(yourImage1.jpg) no-repeat 100% 0; 
} 

#background2{ 
    background: url(yourImage2.jpg) no-repeat 0 0; 
}