Flexible image

with aspect ratio

[Calenulma]

Hi guys!

I'm trying to get an image to my background so that it can stretch along with the browser windows size.
The thing is I want the image to keep it's aspect ratio.

e.g.. if the browser window should be 800*300, the image should keep the 800 width so we never stop seeing it, something like 800*600.
Getting the size as 100% width/height, in this case, the image would stretch to 400*300 and leave half the background without image.

Is there a css property like minimum width/height?

[swa66]

Welcome to webmasterworld!

Sorry, you can't stretch background images in CSS 2.1 at all.

The future CSS3 might have what you're looking for, but don't hold your breath for it yet: [w3.org...]

[Calenulma]

Well, stretch it I can but keeping it's aspect ratio...
There should be some math implementation so we could tell the browser to ignore over sizing and keep minimum sizes.

Anyway, thanks for your quick answer!

[poppyrich]

calenulma,

I'm not quite sure what you mean by "keeping it's aspect ratio".
(Yes, I know what aspect ratio means.)

It's a background-image right? Takes up the whole background of body or what?

There may be a way to do this but I'm not sure exactly what you're aiming for - got a simple HTML with CSS example?

[vincevincevince]

The only way I know of that you can do this is by using a real image.

First:
<img src="background.png" style="width:100%">

Now, the content goes on top, absolutely positioned:
<div style="position:absolute;top:0;left:0;">Content</div>

[swa66]

Vince,

I think not all browsers scale the height along with width on things like

<img src="background.png" style="width:100%">

. Ran into it myself a while ago. I worked around it in another fashion, so I'd need to experiment again to remember which browsers behaved badly (guess either IE6 or IE7).

[vincevincevince]

swa66; yes you are right about that - you need to be careful with your DOCTYPE and exact code used.