Extending A Background Using Javascript

I have a page that looks like this ----------------------------------- | ************* | | ************* | | ******

Solution 1:

Add the two DIVs using javascript. Than set their positions as you wish in relation to the centre of the screen. Than add an onresize event which will reposition DIVs when the browser window gets resized.

window.onresize = updateDivsPosition;

Solution 2:

You can try a pure css solution using positioning. I am assuming that you have a fixed-size image in the centre of the page. For example's sake let's say your image is 800px wide, then

• Position the left div with left 0px, right 50% and add a right margin of 400px
• Position the right div with left 50%, right 0px and add a left margin of 400px

Example:http://jsfiddle.net/F4kay/

(note that I have assumed a smaller image width 256px for the smaller jsfiddle window)

CSS:

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 128px; /* image width / 2 */background-color:#ccc;
}    

#right {
    position:absolute;
    left:50%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 128px; /* Image width / 2 */background-color:#ccc;  
}

​HTML:

<div id="left">Left</div>
<div id="right">Right</div>​

As for the height of these divs, it's up to you how you deal with this, either top / bottom: 0px or a fixed/percentage height. In the example I have used top 0px and bottom 0px.

The trick is to basically add 2 divs, one which takes up the left half of the screen and another which takes up the right. You add a margin to the inner div edges to reveal the inner contents. I have assumed a fixed width but you could also use half of a percentage width. If your image changes dynamically with js it's just a case of updating the margins.

---

For completeness, I've included a full example using this technique. I think it's a clean solution.

Example:http://jsfiddle.net/Hqpyx/

CSS:

body, .bgImage {
    background-image: url('http://flickholdr.com/640/1280/5');
}

.flip {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

body {
 background-position: top center;     
}

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 320px; /* image width / 2 */background-position:top left;    
}


#right {
    position:absolute;
    left:49.99%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 320px; /* Image width / 2 */background-position:top right;
}

HTML:​

<div id="left" class="bgImage flip"></div>
<div id="right" class="bgImage flip"></div>​

Personally I would avoid flipping the image like this. Unless you have some restriction you could just edit your background image and splice half and half of a flipped version together like

[ ] = full image

{ } = flipped image

create an image that looks like

}[ ]{ 

Solution 3:

Here's my static CSS solution. It's similar to Matt's answer but I couldn't get his to work with flipped images and flexible width.

Demo here.

So far it only adds a single div on each side. If you need more, I could write some JS for that. The HTML markup of the page is:

<divclass="content"><divclass="left-background"></div><divclass="right-background"></div>
    content
</div>

and CSS:

body {
    color: #dddddd;
    overflow-x: hidden;
}
@media (max-width: 400px) {
    body {
        overflow-x: visible;
    }
    .left-background, .right-background {
        display: none;
    }
}
.content, .left-background, .right-background {
    background-image: url(http://flickholdr.com/400/300/sea,sun/bw);
    height: 200px;
    width: 400px;
}
.left-background, .right-background {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";

    position: absolute;
}
.left-background {
    left: -400px;
}
.right-background {
    right: -400px;
}
.content {
    margin: 0 auto;
    position: relative;
}