背景画像を複数置く方法を紹介!!

 

 

こんにちわ。
少し暖かくなってウキウキの廣田です。
今日からコーディングの勉強に入りました。

デザインをしたものをコーディングをしていくのですが、
今回のデザインは背景のbackground を複数置く機会があったので、
今日はそのことについて書きたいと思います。
目次

1、背景に指定で画像をおく(デモページ)
2、background-imageについて
3、background-repeatについて
4、background-positionについて

 

 

1、背景に指定で画像を置く


 

今回は画像を5つ置いています。
まずはデモページです。

 

 

html

 

 

css

 

では、細かく説明していきます。

2、background-image


 

 

 

上のcssのように、1つの要素に対して複数書きことが可能です。
その場合、画像を「 , 」でくくっていき、最後にだけ「 ; 」で閉じます。

✴︎重ねたい場合は、上に表示させたいものを最初に持ってきます。
背景にしているbg.jpgは、一番下に来て欲しいので一番最後に書いておきます。

 

3、background-repeat


 

 

画像をリピートさせるか指定していきます。
記述する順番は最初に書いた画像の順番通りです。
最後に書いた背景だけ、repeatにしています。

4、background-position


 

 

 

 

画像の配置位置を決めていきます。
これも上から同じ順番で書いていきます。
書く内容としては、top right bottom left に加え、right 100px,
など細かく設定もできます。
右上のトマトと人参を同じような場所に指定していますが、先に書いた人参の方が上に
来ているのがわかると思います。

 

5、まとめ


 

書く順番にさえ気をつければコードもまとまっていて
とても使いやすいので、勉強になりました。
背景画像が多くて困った時などに役にたてると思いました。

読んでいただきありがとうございました。

 

コメントする