Change image size

[Bruce A. Julseth]

Is there anyway to specify that an image should stretch and shrink to fit a
screen background? I can make it "repeat" but I'd like it to adjust as the
screen is resized.

Bruce

 

[dorayme]

Is there anyway to specify that an image should stretch and shrink to fit a
screen background? I can make it "repeat" but I'd like it to adjust as the
screen is resized.

Not as background, no. You are confined to repeat in a couple of
directions and to a few positioning parameters. So the way to work with
such limitations is to choose/make your image carefully so it looks
natural when repeated. For example, a straight or even gently winding
road can be made to meander on forever to the right of a house as a user
opens his browser wider and wider.

You can specify an image (using the img element, not a background) to be
a percentage of a browser window. This is is easily done and the image
will stretch. Again, one would need to choose an image that lends itself
to such distortion.

In the latter case,you can still get backgound image effects by using
various postioning schemes and margins for other elements. Also
z-indexing and there are fancy opacity possibilities...

 

[Bruce A. Julseth]

Is there anyway to specify that an image should stretch and shrink to fit
a screen background? I can make it "repeat" but I'd like it to adjust as
the screen is resized.

Bruce

Thanks for the response. I "play" with repeat to get a good looking
background.

Bruce

 

[Gus Richter]

Not as background, no. You are confined to repeat in a couple of
directions and to a few positioning parameters. So the way to work with
such limitations is to choose/make your image carefully so it looks
natural when repeated. For example, a straight or even gently winding
road can be made to meander on forever to the right of a house as a user
opens his browser wider and wider.

You can specify an image (using the img element, not a background) to be
a percentage of a browser window. This is is easily done and the image
will stretch. Again, one would need to choose an image that lends itself
to such distortion.

.... and then layer all subsequent document material over the image. The
image will then function as if it were a flexible background image. All
without the use of javascript, of course. Is that what you were thinking?

 

[dorayme]

... and then layer all subsequent document material over the image. The
image will then function as if it were a flexible background image. All
without the use of javascript, of course. Is that what you were thinking?

Yes, that's it, as indicated by my concluding paragraph "In the latter
case, you can still get backgound image effects by using various
postioning schemes and margins for other elements. Also z-indexing and
there are fancy opacity possibilities..."

The drawback as I see it is it goes against the impulse to keep the html
as meaningful as possible whereas the image is usually likely to be
decorative. You mentioned HTML 5 recently I think, perhaps there will be
greater flexibility in deploying background imagery in it?

 

[Gus Richter]

Yes, that's it, as indicated by my concluding paragraph "In the latter
case, you can still get backgound image effects by using various
postioning schemes and margins for other elements. Also z-indexing and
there are fancy opacity possibilities..."

And all without the use of javascript, of course. ;-)

The drawback as I see it is it goes against the impulse to keep the html
as meaningful as possible whereas the image is usually likely to be
decorative. You mentioned HTML 5 recently I think, perhaps there will be
greater flexibility in deploying background imagery in it?

Not in HTML5, but certainly in CSS3 (CSS Backgrounds and Borders Module):
<http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size>

 

[David Segall]

Is there anyway to specify that an image should stretch and shrink to fit a
screen background? I can make it "repeat" but I'd like it to adjust as the
screen is resized.

I don't think you can but I posted a similar query some time ago
<http://tinyurl.com/5fy25e> and received some very helpful advice
including an excellent summary from Nik Coughlin of techniques for
creating an image that could be right truncated and still be
acceptable <http://nrkn.com/backgroundWidth/>. Another technique that
I have employed is to use a series of related images that can be
truncated <httprofectus.com.au/ee_headingexample_little.html>. You
can also use an image that is meant to be repeated as I have at
<http://cheapweb.profectus.com.au/> but I don't think it really works.

 

[Michael Fesser]

..oO(Gus Richter)

Not in HTML5, but certainly in CSS3 (CSS Backgrounds and Borders Module):
<http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size>

Opera 9.5 already supports stretching backgrounds.

CSS text shadows and background sizing
http://dev.opera.com/articles/view/css-text-shadows-and-background-sizing/

Micha

 

[dorayme]

Not in HTML5, but certainly in CSS3 (CSS Backgrounds and Borders Module):
<http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size>

Of course, yes, what was I thinking? <g>