suwanneewebdesign.com

this is the tag:

You can’t! That one dude was right. Someone questions this question nearly everyday.

The only real solution is to make it to fit the largest screen. But the whole image won’t be viewed on smaller screens.

Or you can tile it. But that never turns out excellent.

You can also place the image centered on the background and have a complimenting background color to fill in the areas thats not covered by the picture.

If you try to make a tiny image stretch fit larger screens, it gets distorted and makes thimage look like crap.

Recycling (with a minor change) one of my previous answers….

CSS background-image won’t work, but there is a workaround…feel free to question questions.

// this speech block is only needed, if the page is taller
// than the window’s viewport…

// unfortunately, the height stretching will only fit
// the height of the viewport, using CSS alone – so,
// once page has loaded re-stretch, if needed, to
// fill the full height of the page – not just the
// viewport, if the page is taller
function resetHeight() {
var img = document.getElementById( ‘bgImg’ );
var page = document.getElementById( ‘page’ );
var ph = page.offsetHeight;
var b = document.body;
var wh = (b.clientHeight) ? b.clientHeight : window.innerHeight;
img.style.height = Math.max( wh, ph ) + ‘px’;
}

window.onload = resetHeight;