vertical repeating resizable border images using css

Question

Hi,

I am making a web page for a friend and at the minute I have the layout as follows: there is a 10% border, 80% center area for the banner and content, and another 10% border on the right.

Now instead of having the left and right areas empty I would like to have an image repeating down as far as the page goes (which will probably be different for each page). I would like the image to resize when the window is resized (so img size will be 100% in the 10% area).

I have added a div and set the float:left properties and set the size and this is great but I can't get the image to repeat. I have also tried setting the image as a background image and that got it to repeat but then it stays its original size. Is there a way to get the image to repeat and resize?

Thanks, Neil

Answer 1

You can repeat a css background image but you can't resize, as far as I know.

Apparently, CSS3 gives you a way to specify the size of background images. You can specify this size in pixels, width and height, or in percentages. When you specify a size as a percentage, the size is relative to the width or height of the area that you have pointed out using background-origin. But, the only browsers having this feature implemented so far are Opera 9.5, Safari 3, Konqueror and the latest firefox nightlies, they use -o-background-size, -webkit-background-size, -khtml-background-size and -moz-background-size.

For example,

#myDiv{background-size: 200px 50px}

As you should know, those aren't the most used browser (IE, chrome, FF are) So you shouldn't use this for now.

Answer 2

Try:

.myClass
{
   background-repeat: repeat-y;
}

Add that to the rules of your div, this will repeat it as a background, but to resize it, either you can use CSS3 (which isn't very well supported yet):

.myClass
{
   background-size: 100px 500px
}

or use your favorite image editing software to scale it down :)

Answer 3

I'm afraid not. Repeating is only possible with background images but they don't allow to specify a size. With CSS3, you can use background-size but that's not supported by many browsers, yet.

Most designers solve the problem by making the inner sides of the images blend with the background color.