background-sizeで画像が拡大表示されるのを修正
h1タグの背景を、ずっどーーーんって横一杯に取りたいとき、background-sizeをcoverにすれば綺麗に表示される。
これは分かった。でも、背景画像はスクロールするとくっついていきますね、当たり前だけど。
で、ポジションをfixedにすると、画像が拡大して表示されちゃう。これをどうにかして修正しようと色々やってみた。
このトラブルで悩んでいらっしゃる人がいれば、結論はこれだ。
「画像の高さを十分に取ってみる」
自分がミスったのは、できるだけサイズを小さくするために、画像をコンテナの縦幅ギリギリで合わせてトリミングしていたという点です。
横幅は、1920ピクセルに対応できるようなサイズにしている。でも縦は、せいぜい150とか300とか、そういう数値で切り取ってました。
何故これでは拡大表示されるのか、よくは分かりません。でも、縦幅を800にしてみたらちゃんと表示された。動いていればいいんだす河。