For hitting a lot of those W3C design elements, a scaling web site can be key, especially when your client is worried about resolution of its users.

For those who are unsure, a scaling web site is a page that first to the resolution of the users screen. I.E. it fits on your 800 x 600 16inch monitors all the way up to your 30 inch wide screen LCD’s

To make a scaling web site you not only need some nice CSS skills to actually create the site, but also you need to be able to design the site to work in a scaling situation.

The best way to make a scaling site is to use vertical gradients or repeating patterns.

If you are using a gradient, make sure its perfectly vertical, or your repeating section won’t work.

So you can turn this


Into This


All you need to do is draw your image with repetition in mind, then cut a 1px line out of it

and in your CSS making the background of a DIV that 1px wide image with a “background-repeat: repeat-y” to make it scale the entire width of the DIV. I’m not going to go into detail on the code behind it.

using the PNG hack i spoke about in one of my early blogs, you can lay just about anything over the top of that.

if you wish to put rounded edges on your repeating bar, cut both ends out of the image, then have 3 separate DIV’s, 1 for the first end, the middle repeating DIV and the last DIV with the end DIV.


< DIV > start < / DIV > < DIV with repeat> cut_repeat < / DIV > < DIV >end < / DIV >

and you should get


Ok so i have shown you how to make a bar that can get bigger from the middle. you other option is to have a centred image and have the scaling on the 2 end pieces.

centreimage + orange scale


orange final

All you need to do is have the image in the centre DIV and use the 2 end DIV’s to repeat Y again with the 1px image.


Simple but effective scalable site: