GamingHybrid

Can't seem to remember exactly, and tried a bit of a search, but no luck yet.

I'm trying to use CSS (in body {}) to display the background image stretched 100% in size and glued to the bottom, with no image repeat.

Anyone got the solution? Thanks.

H

Actually, there is no way to scale an image specified with background-image in the current spec. You'll see background-size in CSS3.

The current suggested methods are to use conditionals (read: media queries which aren't well supported) or to use an img element absolute/fixed positioned, behind everything else (z-index).

GamingHybrid

true, I think I found another way, but it might now work. I'm trying it atm.

GamingHybrid

Apparently it won't I guess I'll just wait for CSS3 then :P The site itself is interactively heavy, so too much patching would be more of a issue than solution.

No wonder couldn't remember, since it can't be done. Thanks H.

cowboy

Make your initial page and get your viewable window size using:

<script language="JavaScript">
var width = screen.width;
window.location = 'index.php?width=' + width;
</script>

Immediatly redirecting to a PHP page with:

<?PHP
$width = $_GET['width'];
// resize your master image to the width with GD if needed
if (!exists 'master'.$width.'.jpg') {
// resize, save, and keep that image
}
?>
<style>
body {
background: url(master<?=$width?>.jpg;
etc;
}
</style>

GamingHybrid

Naw, not really what I was looking for. i just wanted something that would stretch the image itself, but not pick a image name.

Thank you though

H

Hmm. I don't like the proxy to PHP so much. You'd be just as well off to use JavaScript to choose a background image (obviously start off with a default, in the event they don't have JavaScript enabled).

FredFredrickson

Execpt the PHP example is platform independent. And javascript is dumb. When you can avoid javascript, do.

H

You're putting load on your server, slowing the request for the image AND depending on JavaScript in the first place (how do you think you're getting the height of the window?).

JavaScript is not dumb and far from it. If done properly, people that don't have JavaScript enabled shouldn't really notice.

Doing it properly in this case would be creating a background image that will work for your average visitor (either by meeting the lowest significant resolution or the most common). That will be specified in your CSS file that is loaded by everyone. Then using JavaScript, probably triggered onload, you'll use DOM to find the element and replace the background image.