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

This is a working code for me. the only thing will be change is the background-position for both property.

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

Answer 2

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 3

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