1

I have a page that looks like this

-----------------------------------
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |
-----------------------------------

The outer frame is the browser edge and thus the <body>, and the stars are a centred background image on the <body> element.

Now, using javascript I'd like to add some aboslutely positioned DIVs each side of that background in order to extend it:

-----------------------------------
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|
-----------------------------------

As the window is resized the centred background will move (to remain in the center of the window), so the divs on each side should move in consequence.

Can anyone please suggest an approach to solving this issue?

Side note on why I'm doing this:

The background is large image, and I wish to have it repeated across the screen by flipping it as described here:

Background flipped tiling using Javascript

The actual process of flipping was discussed in that question, whereas this question deals with the CSS/Javascript aspect of positioning.

Note that in the case of non-capable browsers I'm happy leave the page as it is in the first diagram, with only the centred background.

Community
  • 1
  • 1
tarmes
  • 15,366
  • 10
  • 53
  • 87
  • What is the width of the div in the centre? Is it a fixed width or is it a percentage width? – Matt Esch Nov 08 '12 at 11:02
  • For the moment it's not a div, the background image is on the body element. I can change that if necessary.... – tarmes Nov 08 '12 at 11:03
  • Are you using any common library? jQuery, YUI, Closure...? – T.J. Crowder Nov 08 '12 at 11:06
  • Not at this point. If I were to use one then I know Mootools best, but I'm open to anything. I'm sure I could do some brute force javascript to create the DIVs and reposition them on a page resize but I fear for the performence. I have a feeling that there's a more elegant solution... – tarmes Nov 08 '12 at 11:09
  • @tarmes: adding 2 divs, or indeed any div using JS is hardly _brute force_-ing something... even so, if you're afraid of performance being impacted by doing something like that, steer clear of libs: they're _always_ going to perform slower than well written, bespoke JS that does _only_ what you need it to do, when you need it to be done – Elias Van Ootegem Nov 08 '12 at 11:28
  • OK, the term "brute force" might be excessive, but I felt that there was a pure CSS solutions lurking. Turns out that I was right :) – tarmes Nov 08 '12 at 12:50

3 Answers3

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;
maestr0
  • 5,318
  • 3
  • 28
  • 27
  • 1
    Why not write `window.onresize = updateDivsPosition`? And why use jQuery to add 2 divs? if that's all you're going to do in terms of DOM manipulation jQuery is just total overkill – Elias Van Ootegem Nov 08 '12 at 11:24
1

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

}[ ]{
Matt Esch
  • 22,661
  • 8
  • 53
  • 51
0

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:

<div class="content">
    <div class="left-background"></div>
    <div class="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;
}
Community
  • 1
  • 1
jfrej
  • 4,548
  • 29
  • 36