Sent by Blake Everingham on 9 February 2003 05:05
A question about using imagery in liquid layouts:
I'm sure you've been plagued by this problem before - when using a liquid
layout (one that crops from the right and left, instead of conforming to a
specific width) it seems near impossible to display an image that stretches
the width of the <div> the same in each resolution. You get the problem
that, since the <div id> does not have a set width, you cannot give your
image that set width.
Usually you must use a simple image, knowing fully well it WILL be too big
in 640x, too small in 1024x.
Zeldman has the unique idea to incorporate a <div id> using a specific
width inside your liquid design. Because the image you want to add is set
as a **background-image** all you have to worry about is the <div id>'s
width. Sure, the image may crop, but at least the desired effect is gained.
Furthermore, to tailer it to the 100% width of your given <div id>, it
seems setting "width: auto;" works in IE6/Win, Moz1. Unfortunately this is
very buggy. The images are not even displayed in Opera 6.
Any ideas or suggestions about the width, or technique to custom tailer an
image to set equal widths no matter the user's resolution in a liquid
design? There must be a way.
(A prime example of the problem is my own web site - everomp.com. I would
love to post images instead of just text, but I hate the fact the images
appear too small or too big--NOT EQUAL--in the middle column)
Take care.
Blake Everingham - [EMAIL-REMOVED]
http://www.everomp.com
"You could probably beat a guy to death with the Sunday New York Times."
-- George Carlin