html - 缩放背景图像

Question

我想放大和缩小我页面中的背景图片。我尝试了很多东西，但似乎没有什么能按我想要的方式工作。 :( 我页面的 url 是 http://quaaoutlodge.com/drupal-7.14/ 并且对于每个链接，都有不同的背景图像。我知道图像的大小和质量需要优化，但我首先想弄清楚它的技术部分。如果有人可以帮助实现这一目标吗？

非常感谢! 罗恩

Answer 1

每个页面上的相同背景图片

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

每页不同的背景图片

如果你想为每个页面使用不同的背景图片，

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%;
}

来源:CSS-Tricks