防止背景图像缩放答案

【问题标题】：Prevent background image from zooming防止背景图像缩放
【发布时间】：2012-08-29 15:40:16
【问题描述】：

我希望达到与我发现的这个网站类似的效果：http://www.august.com.au/

在本网站上，如果您放大/缩小 ctrl +/-，背景不会改变。只有内容缩放。

我希望能够为我的网站设置背景图像并拥有它，以便背景图像始终填满屏幕，而不管屏幕分辨率或缩放选项如何。

我知道您可以使用 width:100% 使其填充页面，但我的理解是这在页面加载时应用，并且如果用户在加载图像后缩放将不会重新调整大小。

有人对从哪里开始有任何建议吗？我曾尝试在网上搜索信息，但找不到太多信息。

另外我猜这将使用 JavaScript 而不是 css 之类的东西来实现？？

【问题讨论】：

标签： css image background resize zooming

【解决方案1】：

This worked for me in chrome, firefox

.someImage {
    width: 7%;
    height: 0;
    padding-bottom: 7%;
    background-image: url('../img/myImage.png');
    background-repeat: no-repeat;
    position: fixed;
    bottom: 5%;
    left: 5%;
    background-size: 100% 100%;
}

【讨论】：

【解决方案2】：

原来有一个不错的 Jquery 插件：

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

似乎按我的预期工作。

【讨论】：