こんにちわ。
少し暖かくなってウキウキの廣田です。
今日からコーディングの勉強に入りました。
デザインをしたものをコーディングをしていくのですが、
今回のデザインは背景の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、まとめ
書く順番にさえ気をつければコードもまとまっていて
とても使いやすいので、勉強になりました。
背景画像が多くて困った時などに役にたてると思いました。
読んでいただきありがとうございました。