How to extend an image

[David Segall]

My site <http://profectus.com.au> makes use of an image to decorate
the top and bottom of the page. This usually works for a small range
of screen widths but is seriously challenged by the contrast between
conventional monitors and the new trend to wide-screen monitors.

Has anybody thought of some trick that is generally acceptable? I use
repeat-x but this often results in a confusing image.

 

[Carolyn Marenger]

My site <http://profectus.com.au> makes use of an image to decorate
the top and bottom of the page. This usually works for a small range
of screen widths but is seriously challenged by the contrast between
conventional monitors and the new trend to wide-screen monitors.

Has anybody thought of some trick that is generally acceptable? I use
repeat-x but this often results in a confusing image.

I don't have an answer for you, but I can confirm that even on my standard
monitor at default resolution and window size (1200x1024) The upper graphic
is confusing. I am glad that I don't normally maximize over both monitors
with a resulting 2400x1024 window.


Carolyn

 

[Neredbojias]

With neither quill nor qualm, David Segall quothed:

My site <http://profectus.com.au> makes use of an image to decorate
the top and bottom of the page. This usually works for a small range
of screen widths but is seriously challenged by the contrast between
conventional monitors and the new trend to wide-screen monitors.

Has anybody thought of some trick that is generally acceptable? I use
repeat-x but this often results in a confusing image.

You need a symmetrical graphic, cropped so that it abuts to itself
gracefully.

 

[Greg N.]

Has anybody thought of some trick that is generally acceptable? I use
repeat-x but this often results in a confusing image.

This is not an HTML problem, but an image design problem.

There are three approaches you could use:

1. create a background image for the image (this may need some kind of
layering technique) that extends the image gracefully to the right.

Examples:
the image on top of the page http://hothaus.de/greg-tour-2004
There is a background image there that extends the right edge of that
image ad infinitum.

2. edit the image such that its right edge blends seamlessly with its
left edge. This requires a suitable image plus some photoshop (and the
like) experience.

Examples:
An image of ship loading cranes halfway down the page:
http://hothaus.de/greg-tour-2005/ua1.htm
Image of a power plant, 60% down the page:
http://hothaus.de/greg-tour-2004/roman3.htm
panorama of venice, 50% down the page:
http://hothaus.de/greg-tour-2004/venice.htm

3. Use a *very* wide image with less significant content in the right
third. Such an image can be created in photoshop by copying the
rightmost 20% of an image, scaling it horizontally to some excessive
width and pasting it back to the right of the original image. Again,
this requires a suitable image to begin with.

Example:
http://hothaus.de/greg-tour-2005/img/0603/i2793.jpg

 

[dorayme]

This is not an HTML problem, but an image design problem.

There are three approaches you could use:

1. create a background img...
2. edit the image such that its right edge blends seamlessly with

Examples:

3. Use a *very* wide image with less significant content in the right

Example:

There should be a category in the statistics to mark the
excellence of this post. Succinct general analysis, suggested
approaches with good examples... On my next return to Earth, I am
going to make like this....

 

[Nik Coughlin]

My site <http://profectus.com.au> makes use of an image to decorate
the top and bottom of the page. This usually works for a small range
of screen widths but is seriously challenged by the contrast between
conventional monitors and the new trend to wide-screen monitors.

Has anybody thought of some trick that is generally acceptable? I use
repeat-x but this often results in a confusing image.

Thank you for your post, it inspired me to finish a half-written page on
this very topic:
http://nrkn.com/backgroundWidth/

My personal favourite way to do it is to fade the image to a background
colour:
http://nrkn.com/backgroundWidth/#fadeColour

I've used your image as the example for now, but I will have to re-do the
examples in future using images more suited to each particular technique.

Greg N., I have linked to one of your pages as you have a much better
example of one of the techniques there than I do.

 

[David Segall]

Thank you for your post, it inspired me to finish a half-written page on
this very topic:
http://nrkn.com/backgroundWidth/

My personal favourite way to do it is to fade the image to a background
colour:
http://nrkn.com/backgroundWidth/#fadeColour

I've used your image as the example for now, but I will have to re-do the
examples in future using images more suited to each particular technique.

Greg N., I have linked to one of your pages as you have a much better
example of one of the techniques there than I do.

 

[David Segall]

Thank you for your post, it inspired me to finish a half-written page on
this very topic:
http://nrkn.com/backgroundWidth/

My personal favourite way to do it is to fade the image to a background
colour:
http://nrkn.com/backgroundWidth/#fadeColour

I've used your image as the example for now, but I will have to re-do the
examples in future using images more suited to each particular technique.

Greg N., I have linked to one of your pages as you have a much better
example of one of the techniques there than I do.

Thanks Nik. I'm glad you completed this very useful page. Although I
agree that some of the techniques you used were not ideal with my
photograph I found it instructive to compare the effects on a common
image. Finding a single image that works in each case is probably too
difficult but perhaps you could show the effects on a common set of
two or three images.

 

[David Segall]

This is not an HTML problem, but an image design problem.

You are right but I try to post to the group that will provide a
useful reply. I apologise for not putting [OT] in the heading.

There are three approaches you could use:

1. create a background image for the image (this may need some kind of
layering technique) that extends the image gracefully to the right.

Examples:
the image on top of the page http://hothaus.de/greg-tour-2004
There is a background image there that extends the right edge of that
image ad infinitum.

2. edit the image such that its right edge blends seamlessly with its
left edge. This requires a suitable image plus some photoshop (and the
like) experience.

Examples:
An image of ship loading cranes halfway down the page:
http://hothaus.de/greg-tour-2005/ua1.htm
Image of a power plant, 60% down the page:
http://hothaus.de/greg-tour-2004/roman3.htm
panorama of venice, 50% down the page:
http://hothaus.de/greg-tour-2004/venice.htm

3. Use a *very* wide image with less significant content in the right
third. Such an image can be created in photoshop by copying the
rightmost 20% of an image, scaling it horizontally to some excessive
width and pasting it back to the right of the original image. Again,
this requires a suitable image to begin with.

Example:
http://hothaus.de/greg-tour-2005/img/0603/i2793.jpg

Thank you for your very helpful, beautifully illustrated, reply. You
and Nik Coughlin have demonstrated that my choice of group was spot on
.

 

[Colin Wilson]

Try <img src="my_image.jpg" height="10" width="100%">

works in IE6