CSS如何在底部而不是图像的顶部进行缩放

Question

我的首页上有一张背景图片，可以覆盖整个屏幕。

这是一张相当大的图片，2560x1714

但是，大多数屏幕分辨率都不匹配。当纵横比达到最大值时。它开始“缩放”图片，将其填充到屏幕的宽度。但是，当它执行此操作时，它会放大图片的顶部。

我需要它放大底部，因为那是我想要焦点的地方。

这是我想看到的图像:(基本上是海滩）

但是，当我将浏览器放大时，它会“缩放”在图像的顶部。

它完全可以改变我对图像的看法。但我需要它与现在的相反。所以无论如何，海滩总是在屏幕的底部。

这是我标题的CSS：

header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #FAFAFA;
background-image: url("../img/header-2.jpg");
background-position: top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover
}

关于如何制作它的任何想法，所以我看到更少的天空，而不是更少的海滩/冲浪板？

感谢您的帮助！

Answer 1

background-position: top;

到

background-position: bottom;