Previous Message
Next Message

Background images don't grow with text in elastic design?

Sent by Jukka K. Korpela on 2 September 2004 06:06


On Wed, 1 Sep 2004, Mosh Teitelbaum wrote:

> background images don't seem to scale along with the text when
> increasing and decreasing text size.  Every other image does.
>
> I'm assuming this is because I'm unable to specify the width and height of
> the background images in ems.  Is this accurate?

Yes. You cannot specify their size at all - the background image has its
intrinsic size specified by the image data itself, and you can only affect
the tiling, positioning, and fixedness in CSS.

Content images can be scaled by specifying their width and height, but
beware that different browsers do the scaling differently, and often
awfully.

> The site is located at http://www.evoch.com/ and the home page includes 2
> background images.  The first is the blue sky image with the text "Empower
> Your Business" and the second is the partial logo at the base of the center
> column.

For the first one, you could make "Empower Your Business" textual content
(styled suitably) and just the sky a background image. You could probably
design the image so that it tiles acceptably, so that no scaling is
needed. Alternatively you could make it a content image in a div
positioned at the same location as a div containing the text, with the
latter having a larger z-index and transparent background.

Regarding the second one, isn't it small enough so that scaling is not
needed? But what you might need is a design that makes the associated text
occupy relatively fixed position with respect to the image, so that the
text won't (seriously) overlap the image or get too far from it.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: