背景圖像的垂直高度

Question

我有情況。我使用標題全角圖像，所以寬度是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; 
}