前提
こちらのサイトの課題に取り組んでいます。
スマホ画面の際の背景画像の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自体に背景画像を入れ同様にやってみましたが効きませんでした。
高さを指定しているのが原因なのでしょうか?
0 コメント