scale background image

2019-04-21 15:58发布

站内文章 / HTML/CSS
32 0 0

问题:

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

回答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



回答2:

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



回答3:

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';



回答4:

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');
}


标签： html css web background-image
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~