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
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;
}
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
Antoher way to achieve this can be found at MDN:
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
IE Fallback:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
from https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Nice to see html background-image being used well. Because some developers depend on trailing edge css to maintain backwards compatibility, many quirks exist for otherwise css3 compatible browsers. Like background:cover in older Safari versions (<4.05), which does not work. In this case we can use the older css3 vendor fallback as shown
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-backgound-size:100% 100%; /* early css3 implementation */
-webkit-background-size:cover;
}
And, if by chance you want different background images for different pages in pure css, lets go with
html#bg1 {backrgound-image:url(images/bg1.jpg);}
html#bg2 {background-image:url(images/bg2.jpg);}
But, if you cannot give your <html> tag an id or class you may have to resort to some javascript. You can then use a different background image for each page on the <html> element, which is just what is needed. This seems to work fine on the html tag. Some browsers ignore the css for background-image when used on html. The body tag is less temperamental. This may be a better fix than the php-based method. For example:
<script>
document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)';
</script>
The html css for background-size would continue to apply and would cover correctly across various browser versions. Note however, that older Safari will throw an error on javascript which uses an empty url, say to clear the background image, e.g.
<script> /*Causes Error Safari 4*/
document.getElementsByTagName('html')[0].style.backgroundImage='url()';
</script>
The error will normally halt javascript execution with no clue as to the cause. Instead we need to use style.backgroundImage='none';
Use a media query in your CSS to specify a background image for different screen sizes:
@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}
