Question

我有一个主页，背景图片设置在顶部和中央。图像高780像素。

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

这在高清屏幕上看起来很棒，甚至在较低的分辨率下也是如此，但当你进入平板电脑/手机屏幕尺寸时，这只会占用太多空间 - 人们不得不向下滚动一页或更多内容才能获得内容

这里是CSS：

＆＃13;

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

＆＃13;

我想保留图像，但可能会缩小图像以获得较低分辨率的屏幕。理想情况下，背景会简单地向上移动，因此它永远不会超过屏幕的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;
}
}

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

2 个答案: