规模背景图像 [英] scale background image

问题描述

我想在我的网页上放大或缩小背景图片。我试过多个东西，但没有什么似乎工作的方式，我想要的。 :(我的网页的网址是 http://quaaoutlodge.com/drupal-7.14/ ，每个链接都有一个不同的背景图片我知道图片的大小和质量将需要优化，但我首先想要弄清楚它的技术部分如果有人请coudl协助这种做？

非常感谢！
Ron

解决方案

每页都有相同的背景图片

如果你想要一个背景图像调整和填充整个窗口空间，无论大小，然后使用这个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; 
} 
  
 
 
 
每页上有不同的背景图片
 
 
 
 
         ; 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％; 
} 
  

资料来源： CSS-Tricks

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

解决方案

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

这篇关于规模背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！