Bootstrap响应式IMG扩展到顶部而不是中心

Question

我在使用HTML / CSS的Bootstrap模板中有一张背景图片。我想知道是否有可能在更大的屏幕上做到这一点，而不是缩放图像并放大到中心，而是放大到顶部？

感谢您的帮助！

编辑：这是在https://chorebug.com/上进行的-看一下标题图片。更改页面大小时，它会进行裁剪并调整其大小。但是在大屏幕上，它会伸出他的头，我希望它可以在顶部修剪。

Answer 1

使用以下规则为全屏尺寸附加媒体查询：

@media (min-width: 768px) {
     header.masthead {
          background-position: top;
     }
}

Answer 2

您只需要设置标题图像的背景位置。 为此，您可以在类规则background-position

中添加header.masthead属性

header.masthead {
    background-position: center top;
}

OR

您可以将背景速记更改为：

header.masthead {
    background: url("../IMG_4126.jpg") no-repeat center top;
}

Answer 3

只需更改属性值

landing-page.css：21

更改此选项即可满足您的需求 background : url("../IMG_4126.jpg") no-repeat top center