比例背景图像

Question

我想在我的页面中放大和缩小背景图像.我尝试了很多东西,但似乎并没有像我想要的那样工作.:(我页面的网址是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