background-image 的垂直高度

Question

我有情况。我使用的是 header full-width 图像，所以宽度为 100%，高度固定为 650px。我需要在路上定位图像，以防我增加或减少浏览器宽度，背景图像只会增加或减少宽度，而不会垂直移动图像。

我希望我写的可以理解。如果还不够，这里是截图

现状

我想要的情况

SCSS 代码

header {
    margin-top: 78px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    max-width: calc(100% - 120px);
}

.header-main {
    background-image:url(../img/header.jpg);
    height: 650px;
    margin-left: 60px;
    margin-right: 60px;
}

HTML

<header class="header-main" >
        ---Content---
</header>

非常感谢你:)

Answer 1

尝试更改背景大小

header {
    margin-top: 78px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 650px;
    position: relative;
    max-width: calc(100% - 120px);
}

.header-main {
    background-image:url(../img/header.jpg);
    height: 650px;
    margin-left: 60px;
    margin-right: 60px;
}

background-image 的垂直高度

Vertical height of the background-image

html

css

position

background-image