WEB制作

【CSS】10秒で解決 背景画像の設定方法 セットで覚えておきたいコードも紹介します

スポンサーリンク

景色

プログラミングを勉強中のみなさん、こんにちは!

今回は、背景画像の設定方法について紹介します。
初心者向けのメモ書き程度として執筆しておりますので、あしからず。

それでは見ていきましょう。

目次
  1. コード
  2. 注意点
  3. まとめ

コード

このコードで、背景画像が設定できます。
background-image: url("ファイルパス");

しかし、これだけだと、画像が繰り返し表示されてしまいます。
それでいいなら問題ありませんが、一つの画像を横幅いっぱいに広げたいときは、

background-size: cover;
を設定しましょう。

そして最後に画像の位置を中央にもってくる設定として
background-position: center;
を記載しましょう。

注意点

背景画像を設定しても、設定する要素に「高さ」がないと、表示されません。

ですので、「あれ、設定したはずなのに・・・」と困ったら、
その要素に、

height:500px;

など適当に設定してみください。
表示されるはずです。

詳細はこちらを参照してみてくださいね。
背景画像の設定

まとめ

画像を横幅いっぱいに設定する。
これがWebサイトで多く見られるのではないでしょうか。

background-image: url("ファイルパス");
background-size: cover;
background-position: center;

このコードを3点セットで使用することを覚えておけば便利です。
(コード自体を覚える必要はありません。使うときに調べればいいので。)

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

背景画像に関連する記事も紹介しておきます。

スポンサーリンク

-WEB制作
-, , , , , , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5