How to stretch image programatically?

Question

There is a vertical bar on my homepage. It is actually an image that looks something like this:

The white boxes are the place-holders for the product images that will be added dynamically. I want to know how to stretch the blue vertical bar as new product images are added. This must be done programatically.

Answer 1

Use the image as background and repeat it vertically.

Something like this

<style>
    .pageBG { background: url(your_image_source) repeat-y; }
</style>
<div class='pageBG'>
    <!--your content goes here -->
</div>

From your image I think you can make a small image of dimension 5*5 or something and make it repeat vertically and horizontally. For that you don't have to set the background position, because repeat is the initail value for background-position.

Answer 2

Why to use image at all? Why not simply set the background color for the div:

<style>
    .pageBG { background: #35f; }
</style>

You do not need a white hole in the background to display an image.