Question: I got a side bar (fixed on the right side) which is made with 3 images, `Top.png`, `Mid.png`, `Bot.png`. I was wondering if there is a way to load those 3 images during runtime and create/merging into a new one (`sideBar.png`), without saving it to the HD.

The point is, as I don't know the height of the screen, I am placing the Mid image as many times as it is needed to fill the space between the `Top.png` and the `Bot.png`.

Using:

* Javascript
* HTML 5
* CSS 3

EDITED:
and the CSS, its the same for all 3 parts... it only changes the url, name and position:

```
$("#Mid").animate({right: "-230px",}, 500 );
$("#Top").animate({right: "-230px",}, 500 );
$("#Bot").animate({right: "-230px",}, 500 );

#Bot {
        position: absolute;
        top:495; 
        right:0;
        width: 230px;
        height: 35px;
        background-image: url(/images/Bot.png);
    }

```

Answer: 
This seems truly unnecessary. I'd recommend using CSS attribute `repeat-y` and building your HTML and CSS structures in such a way the images will mesh. This is not the purpose of JavaScript.
You haven't shown the HTML markup, but I'm guessing you should put the three images in a container div and animate the container div with one animation, not three. Then, there will not be anything out of sync during the animation.