Background Image Height

Can it auto stretch?

[nate4cfdev]

I'd like my background image to scretch taller if content is longer than usual. Is there a way to do this?

[justgowithit]

It can be done with multiple divs by chopping the image. This will cause unnecessary bloat though. What is the image.... a gradient, a box, etc.?

[Robin_reala]

There's no way currently in the specs to do this. You can do it in IE using the proprietary AlphaImageLoader (which I believe works even if your image doesn't have an alpha channel). You're probably best off just tiling the image though, or fading it out to a solid colour which you can then set as the background.

[Xapti]

Stretched backgrounds can look lousy, particularly if it's stretched too much (which doesn't take much to achieve). Something like this could be done with javascript, but it wouldn't be an actual background image, it'd be image absolutely positioned behind the content. This is not proper web design though, and I wouldn't recommend it. It would also require javascript, something I also wouldn't recommend.

You may want to consider using background-attachment:fixed which will solve your problem in a way, but will also give a kind of strange effect when scrolling.

Otherwise there's the option of editing the background image with a image editor so that it can repeat itself tiled without looking bad (gradient the top to the bottom and the bottom to the top - if vertically tiled))

[Bert36]

I do not recommend stretching background images, but...I did have to make a site once that had that feature. Here is the javascript if you absolutely want to do it:

function picshow(nm) {
iw = screen.width-20;
if (screen.width<800) iw=780;
ih = (589/824)*iw;
document.write('<DIV id="Layer1" style="position:absolute; left:0px; top:0px; width:'+iw+'px; height:'+ih+'px; z-index:0"><IMG src="'+nm+'" width="'+iw+'" height="'+ih+'"></DIV>');
}

Hope it helps.

[Xapti]

Bert, stretched images acting as background can be done even without javascript though. It's when it's a background-image that is difficult to do.
CSS3 supports background-image stretch (as well as multiple background images, and other stuff), but it's not really supported yet.