View Full Version : Scaling Images

Dec 22nd, 2008, 11:22 AM
Hi all

I'm designing a site which is focused around big images... I made a background-type image which is extremely large in dimension (1600 x 1200) for those who may have larger resolutions. However, I want to be able to use it as a background image (or just an normal <img>), but scale it to the right size for the current user's resolution, whilst keeping the proportions the same, so as not to stretch it one way or the other...

Here's the image:
(The text is just place-holder text at the moment, by the way.)

It's been re-sized, but I hope that won't matter. If you want the full-sized version, please ask.

To be honest, I'm not sure if this can be done in HTML and/or CSS. Perhaps it requires something else. If so, please point me in the right direction, since I don't actually know any Java/script, or any other coding language that well to be honest.

Thanks in advance.

~ wella

Dec 22nd, 2008, 11:31 AM
Hi there,

That should be several images sliced up and coded to fit together.

The background gradient should be sliced vertically and only needs to be 1 pixel wide. Then just repeat it on the x-axis via css.

I would then slice the circle into an image by itself. Then slice one "nav bar" as long as the longest one is and use that for the nav, use a z-index to have any extra bar go under the circle. That way, you can cover long and short text without different nav images.

Make some sense? Hope that helps :)


Dec 22nd, 2008, 01:54 PM
Hmm, yes, it does make sense, thanks for clearing those things up.

However, I still have a couple of problems. The circle will still be the same size no matter what browser you are using, so for some people it will take up more of the screen. I want it to be scaled to the right size.

Also, the glow effects around the text images would be lost (probably).

However, I'll try a couple of things out and get back to you if anything works.