How to add two background images - left and right from center column

Question

I have this 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;
}

and this html:

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

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

1. when I try to change browser width - background images go under the central column

2. 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.

If I make 1 big image with 1020px blank center part and put my left/right images into it.. will it work?

Answer 1

You can follow multiple solutions:

1) Use divs: [good]

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>

And a pseudocode of CSS (not tested):

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

Then playing with CSS (floating and sizes) you can adjust the view.

2) Use multiple background: [not always good]

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 static "big" image: [lazy solution]

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) use responsive design: [excellent - do it!]

To avoid the overlapping of the images on the central (content) div, you can set as background-color (of this div) as white.

Again, to avoid overlapping, you can set a "special" responsive CSS. That detects if the window 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's some links about responsive design:

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

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

Answer 2

You can use two absolute DIVs with two backgrounds. One left center and another one right centered:

Place the DIVs wherever you want in the site. (they are absolutely positioned)

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