如何添加两个背景图片 - 从中心列左右 [英] How to add two background images - left and right from center column
问题描述
我有这个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个图像 - 从中心列左右移动，而不改变中心列宽度，图像不影响页面的整体宽度。
示例：
I need to add 2 images - left and right from center column without center column width changes and that the images did not affect the overall width of the page. Example:
我可以添加图片，并尝试了
I can add images, and made a some attempts
-
我尝试更改浏览器宽度 - 背景图片位于中心列下方
when I try to change browser width - background images go under the central column
我试图更改 min-width：1020px;到最小宽度：1665px;乍一看，一切都很好，但为了屏幕分辨率 - 小于1665px所有内容向右移
我尝试了几个选项，但不成功
I tried to change min-width:1020px; to min-width:1665px; - at first glance, all is well, but for the screen resolution - less than 1665px all content is shifted to the right
I tried a few options but unsuccessfully
我的问题：我放置一个图片，以便当您更改浏览器的宽度时，中心列的左右两侧（如果没有背景图片，则为默认行为）
My question: сan I place an image so that when you change the width of the browser - reduce distance to the left and right of the center column (this is the default behavior if no background images)
Here is code with images examples.
如果我使用 1020px
If I make 1 big image with 1020px blank center part and put my left/right images into it.. will it work?
推荐答案
您可以使用多个解决方案：
You can follow multiples solutions:
1）使用divs：
创建一个好的框架 divs可以解决你的问题，例如像这样：
Creating a good "framework" of divs can solve your problem, for example something like this:
<div id="allWrapper">
<div id="leftSidebar"></div>
<div id="centerOrContent"></div>
<div id="rightSidebar"></div>
</div>
和CSS的伪代码（未测试）：
And a pseudocode of CSS (not tested):
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 ）可以调整视图。
Then playing with CSS (floating and sizes) you can adjust the view.
2）使用多个背景：
您可以使用此CSS伪代码使用多个背景（位于： http://www.css3.info/preview/multiple-backgrounds/ ）
You can use this CSS pseudocode to use multiples backgrounds (found here: 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）使用静态大图片
使用静态图片作为你的建议（中间有空白）也可以解决问题，但如果网站是响应，你可以有不同的图形问题屏幕分辨率（或调整浏览器窗口大小）。
在这种情况下，您还必须修正中心列的位置和宽度（在窗口调整大小）。
Use a static image as you suggest (with blank in the middle) can also solve the problem, but if the website is "responsive" you can have graphic issues with different screen resolution (or resizing the browser-window). In this case you must fix the position and the width of the central column too (on window resizing).
4）使用响应式设计：
为避免中央（内容）div上的图像重叠，您可以将背景颜色（此div的背景颜色）设置为白色。
To avoid the overlapping of the images on the central (content) div, you can set as background-color (of this div) as white.
同样，为了避免重叠，您可以设置一个特殊响应CSS。这检测窗口是否具有宽度< X 2个图像消失。例如对于这个CSS伪代码：
Again, to avoid overlapping, you can set a "special" responsive CSS. That detects if the windows has width < X the 2 images disappears. For example with this CSS pseudocode:
@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;
}
}
这里有一些关于响应式设计的链接：
Here some links found on the web about responsive design:
http：// webdesignerwall .com / tutorials / 5-useful-css-tricks-for-responsive-design
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
这篇关于如何添加两个背景图片 - 从中心列左右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
