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

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;
}

而这个HTML：

<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%;
 height: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 background-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）使用静态的“大”的形象：懒溶液]

使用静态图像你的建议（在中间空白）也可以解决问题，但如果网站是“有求必应”，你可以有不同的屏幕分辨率（或调整浏览器窗口）图形的问题。在这种情况下，必须修正的位置和中心柱的宽度太（上窗口大小）。

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;
}

Answer 3

这是对我工作的代码。将改变的仅仅是两个属性background-position。

.image-bg-custom1 {
    background-image: url(/images/left-get.png);
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.image-bg-custom2 {
    background-image: url(/images/right-get.png);
    background-repeat: no-repeat;
    background-position: center right;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}