Images and a dynamic layout

Question

I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url("/IMAGES/header.png");
}

The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but *the image doesn't increase in size; it simply repeats.*

How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).

Answer 1

The only way I've ever found is:

• Set background of #header to bgcolor of header image.
• Place new div inside #header
• Split header image into 2
• Set left half of new image as #header background aligned-left
• Set right half of new image as #header.div background aligned-right

Of course that's only going to work with appropriate images though.

Answer 2

I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).

Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?

Answer 3

There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:

background-position: center center;
background-repeat: no-repeat;

Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos> where xpos and ypos can be given in the regular fashion (em, px, %, etc...).

Answer 4

@Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.