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\')         


        

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:

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