記事内に商品プロモーションを含む場合があります
こんなお悩みの解決記事です。
CSSで画像を配置し、ブロックいっぱいに指定する方法を解説します。
メインビジュアルでよく見かけるこんなやつです↓
ひょっとすると、持っている画像が以下のように、横幅合わない場合もあるかと思います。
このようにpx数が足らない時でも、ブロック要素全体に画像を配置する方法についてみていきましょう。
backgroundプロパティで指定する
以下のように指定したとします。
See the Pen
BaWKXGo by Yu Ohshiro (@you405)
on CodePen.
これでは、幅・高さが足らないときにカバーしてくれません。
0.25×で見てみると、背景がずれてしまっているのが分かります。
backgroundプロパティを分解する
こういう時はどうすれば良いか。
以下のプロパティを追加で記述しましょう。
.mv {
background-size: cover;
}
See the Pen
YzZWKKm by Yu Ohshiro (@you405)
on CodePen.
サイズは合ってきましたが、下にズレているので、以下を追加してさらに調整します。
.mv {
background-position: 0 50%;
}
See the Pen
GRWqKpp by Yu Ohshiro (@you405)
on CodePen.
これで中央に揃えることができました。
backgroundプロパティの詳細指定
ここで、backgroundでよく使用するプロパティを紹介します。
background-image: （指定したい画像url）background-size: （指定画像のサイズを調整）background-repeat: （繰り返すの可否）background-position: （指定画像の位置を調整）
単にbackgroundで指定するのは省略した書き方で、細かく指定すると以上のようなものがあります。
background:
まとめ
本記事では以下のことについて解説しました。
- backgroundプロパティで指定する
- backgroundプロパティを分解する
- backgroundプロパティの詳細指定
先述した通り、backgroundだけで記述するのはカンタンですが、詳細指定することができません。
backgroundには他にどのようなプロパティがあるのか把握することで、細かな調整も可能ですので、必要に応じて使い分けていってください。
