background-positionの縦が効かない

前提

こちらのサイトの課題に取り組んでいます。
スマホ画面の際の背景画像のpositionが効きません,,,

実現したいこと

スマホ時に手が文字にかぶるようにpositionを設定したいです。

発生している問題・エラーメッセージ

background-positionの横軸は効きますが、縦軸が効きません,,,

該当のソースコード

html

<div class="hero"> <div class="hero-bg"> <h1>Cresta Design.</h1> </div> </div>

css

/* hero */ .hero { text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .hero-bg { background-image: url(./img/fv-bgi@2x.jpg); background-repeat: no-repeat; background-size: cover; width: 100%; min-height: 740px; } .hero h1 { max-width:449px; height: 136px; height: auto; color: #fff; border: 1px #fff solid; padding: 24.5px 0; }@media all and (max-width: 768px) { /* hero */ .hero-bg { background-position: 90% 30%;} }

試したこと

hero-bgをなくしhero自体に背景画像を入れ同様にやってみましたが効きませんでした。
高さを指定しているのが原因なのでしょうか？