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

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…).