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;
}
<strong>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:</p>
<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
}[ ]{