All geek questions in one place

Extending the background using Javascript

I have a page that looks like this:

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

The outer frame is the edge of the browser and therefore <body> , and the stars are the centered background image in the <body> element.

Now, using javascript, I would like to add some aboslutely positioned DIVs on each side of this background to expand it:

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

As the window resizes, the centered background will move (to stay in the center of the window), so the divs on each side should move as a result.

Can anyone suggest an approach to solve this problem?

Notice why I do this:

The background is a large image, and I want it to repeat across the screen, flipping it, as described here:

Javascript Striping Background

This question discussed the actual flipping process, while this question is about the CSS / Javascript positioning aspect.

Please note that in the case of incompatible browsers, I am happy to leave the page as it is on the first diagram, only with the center in the center.

+1
source share
3 answers

Here is my static CSS solution. It looks like Matt's answer , but I couldn't get it to work with inverted images and flexible widths.

Demo is here.

So far, he only adds one div on each side. If you need more, I can write JS for this. HTML page layout:

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

Add two DIVs using javascript. Then set your positions as you wish relative to the center of the screen. Then add an onresize event that will change the position of the DIV when the browser window is resized.

 window.onresize = updateDivsPosition;
+1
source

You can try a clean css solution using positioning. I assume that you have a fixed size image in the center of the page. For example, let's say your image is 800 pixels wide, then

  • Place left div with left 0px, right 50% and add right edge 400px
  • Place the right div with left 50%, right 0px and add left edge 400px

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

(note that I adopted a smaller 256 pixel image width for a 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 handle it: top / bottom: 0px or fixed / percentage height. In the example, I used top 0px and bottom 0px.

The trick is to basically add 2 divs, one of which occupies the left half of the screen, and the other the right. You add a marker to the inner edges of the div to open the inner content. I assumed a fixed width, but you can also use half the percentage width. If your image is dynamically resized using js, this is just a case of updating the fields.

For completeness, I have included a complete example using this technique. I think this is 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. If you have some kind of limitation, you can simply edit the background image and combine the half and half inverted versions, as

 [ ] = full image { } = flipped image create an image that looks like }[ ]{
+1
source

Source: https://habr.com/ru/post/1444769/

More articles:


All Articles