プログラミングを勉強中のみなさん、こんにちは!
今回は、背景画像の設定方法について紹介します。
初心者向けのメモ書き程度として執筆しておりますので、あしからず。
それでは見ていきましょう。
コード
このコードで、背景画像が設定できます。
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万円のエンジニア転職サイト【転職ドラフト】
背景画像に関連する記事も紹介しておきます。 続きを見る
【CSS】画像を均等幅で横並びにする方法