CSS

【CSS】backgroundで背景全面に画像を配置しよう

読者さん
読者さん
backgroundで背景いっぱいに画像を持ってくるのってどうやるんだろう?

こんなお悩みの解決記事です。

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には他にどのようなプロパティがあるのか把握することで、細かな調整も可能ですので、必要に応じて使い分けていってください。

 

 

ABOUT ME
大城ゆう
エンジニア歴4年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事をしている。
【未経験者歓迎】ゼロスキルからエンジニア転職しませんか?
エンジニアコードは、独自メソッドを元に独学エンジニアを転職に導くプログラムです。
今なら、未経験〜転職までのカリキュラムを3STEPにまとめた
「無料E-BOOK」と「オンライン講座」プレゼント!