Question

I would like to scale up and down a background image in my page. I’ve tried multiple things but nothing quite seems to work the way I want. 🙁 The url of my page is http://quaaoutlodge.com/drupal-7.14/ and for each link, there’s a different background image. I know the size and quality of the images will need to be optimized but I first want to figure out the techincal part of it. If someone please coudl assist in getting this going?

Thank you very much!
Ron

Answer 1

Same background image on every page

If you want a background-image that resizes and fills the entire window space, no matter what the size, then use this CSS,

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Different background image on every page

In case you want a different background image for each page,

HTML

<div id="bg">
    <img src="<?=$imgsrc;?>" alt="">
</div>

CSS

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

Source: CSS-Tricks