Image stretch in CSS

[shaya4207]

I have a page with dynamic content on it, and I have a background image (put there with CSS as a "background"). I'm trying to have it stretch NOT REPEAT with the content, when there's more content it should be longer...

Any help would be very appreciated!!!

[almostbob]

why not
fix the background in place and have the content scroll over it

body {background:#ffffff url('img.png') no-repeat fixed 0 0;}

[shaya4207]

But that wouldn't make the image stretch, fixing it when I scroll doesn't really help

[almostbob]

the background image occupies the window and text slides over it as if written on a glass sheet,
the user sees no difference to a stretched image, the background is always in place, except the image is not distorted and stretched to fit a 2500px(example) high page

look at this demonstration and see if it changes your mind

AFAIK, you can't change the dimensions of a background image via css. Mind you, I'm working on CSS in the year of our lord 1546. You can set its 'position' and 'repeat'. Whether you can mess with it via JS, I don't know.

A cheat could be to place an absolutely positioned image within a div and set that to a set width/height/position - to force a dimension - that can be done dynamically with php.
You can place the div with a low z-index, so that it shows beneath the rest of the site.

[drjohn]

give the image a height of 100% and a width of 100% (or whatever numbers suit you.

HOWEVER it will look distorted and pixelated

[shaya4207]

the background image occupies the window and text slides over it as if written on a glass sheet,
the user sees no difference to a stretched image, the background is always in place, except the image is not distorted and stretched to fit a 2500px(example) high page

look at this demonstration and see if it changes your mind

I'm aware of the fact that it might get distorted, but having it fixed in one place is definitely not gonna work for me

[shaya4207]

AFAIK, you can't change the dimensions of a background image via css. Mind you, I'm working on CSS in the year of our lord 1546. You can set its 'position' and 'repeat'. Whether you can mess with it via JS, I don't know.

A cheat could be to place an absolutely positioned image within a div and set that to a set width/height/position - to force a dimension - that can be done dynamically with php.
You can place the div with a low z-index, so that it shows beneath the rest of the site.

Sounds interesting, you mind elaborating on the php part please?

Well, Dr. John had it right with dimensions to 100%. This will also resize with the browser window. Nice one Dr.J - the simplest solution is always the best.

<div><img src="css/images/me.gif" width="100%" height="100%" /></div>

Worked for me.
You'll need to set the div position to whatever you need, e.g. absolute/relative and set its z-index.

[shaya4207]

Well, Dr. John had it right with dimensions to 100%. This will also resize with the browser window. Nice one Dr.J - the simplest solution is always the best.

<div><img src="css/images/me.gif" width="100%" height="100%" /></div>

Worked for me.
You'll need to set the div position to whatever you need, e.g. absolute/relative and set its z-index.

Thanx a million, I'll check it out as soon as I get back to my desk...

[MidiMagic]

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

[shaya4207]

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

So what do you suggest I do?

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

I tried it in FF,IE7,Chrome - 100% width image with resize on browser window resize. You can use a min-width and/or max-width for the page, which should constrain the div image - unless you make it absolute.

[MidiMagic]

So what do you suggest I do?

I suggest you "DON'T."

DON'T expect a web page to behave like a Word document. The web standards aren't designed for that. Web pages flow to fill the available space.

DON'T expect to place things at certain places within the browser viewport. They will not stay put with a different browser, a different screen resolution, or a different sized restored down window. And all of it changes with the new widescreen monitors.

DON'T expect to place a footer at the bottom of the viewport and have it actually be there on all computers. Footers are not defined for any web device except the table, and they go at the bottom of the table, not the screen.

DON'T define things in terms of absolute measurements, such as pixels and points. Use percentages and ems.

DON'T expect to exactly fill the entire screen with an image. You can have it fill the width (with width: 100%; ), but because of the varying aspect ratios, you can't make it fill the height on all computers. Note that if several attributes conflict, the browser will sacrifice a height attribute first to satisfy the others.

DON'T expect a tight design to stay together on all screen resolutions. Design it for a low resolution screen, and use percentages, so the parts stay in the same relative positions on higher resolutions.