どうもー。バナナです。
あけましておめでとうございます。
もう4月なんですけどね。
このブログもだいぶ放置していました…。
今年もゆるく頑張っていきたいと思います。
cssでの背景画像って実は一つの要素に複数設定できるんですよ。
以前からよく使用しているのですが、そのたびに調べるの面倒になってきたので、記事にしたいと思います。
デモ
上のデモでは一つの要素に2枚の背景画像を設定しています。
設定方法
html
<div class="box"></div>
css
.box{
background: url(./images/img_01.png) no-repeat left top,
url(./images/img_02.png) no-repeat right bottom;
}
よく使うパターンのデモ
html
<div class="box"></div>
css
.box{
url(./images/bg_ornament_left_top.png) no-repeat left top,
url(./images/bg_ornament_right_top.png) no-repeat right top,
url(./images/bg_ornament_left_bottom.png) no-repeat left bottom,
url(./images/bg_ornament_right_bottom.png) no-repeat right bottom;
}
バナナはこんな感じで要素に装飾をつけたい場合によく使います。
これで毎回、調べる必要がなくなった。楽になります。
みんなも使ってみてね。
またね。