Vertical Repeating Resizable Border Images Using Css

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

Solution 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: 200px50px}

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

Solution 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: 100px500px
}

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

Solution 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.