根据屏幕宽度缩小背景图像？

Question

我有一个主页，其顶部和中心设置了一个大背景图片。图片高780px。

（我在 Joomla T3 框架上使用 Bootstrap）

这在高清屏幕上看起来很棒，即使在分辨率稍低的情况下也是如此，但是当您使用平板电脑/phone 屏幕尺寸时，这会占用太多空间 space - 人们不得不向下滚动一页或更多页以访问内容。

这是CSS：

.homepage {
    background: #fff url("../images/home_back.jpg") no-repeat top center; 
}

我想保留图像，但可能会缩小图像以适应较低分辨率的屏幕。理想情况下，背景会简单地向上移动，这样它就永远不会占据超过 3/4 的屏幕...

简而言之，有没有办法让背景相对于屏幕宽度和高度位于负y位置？

编辑：需要浏览器支持：当前所有主要的桌面浏览器，非常重要的是 iPad + Android 平板电脑。

Answer 1

.homepage {
    background: #fff url("../images/home_back.jpg") no-repeat top center; 
    background-size: cover;
}

Answer 2

好的，这是最适合我需要的解决方案。谢谢大家的建议：

@media all and (max-width: 1920px) and (min-width: 980px) {
.homepage {
    background: #fff url("../images/home_back.jpg") no-repeat top center; 
}
}

@media all and (max-width: 979px) and (min-width: 480px) {
.homepage {
    background: #fff url("../images/home_back.jpg") no-repeat top center; 
    background-size: auto 550px;
}
}

根据屏幕宽度缩小背景图像？

Shrinking background image dependant on screen width?

css

twitter-bootstrap