仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

CSSで背景画像(background)を複数指定する方法

公開日:

CSS

CSSで背景画像(background)を複数指定する方法

 

背景画像(background)を複数指定したい!と思ったことはありませんか?

 

無駄にdivを増やしていくのも嫌だし・・・。
簡潔にまとめたい!!!

 

そんなアナタにピッタリ!
今回は、backgroundに複数の画像を指定する方法をご紹介します。

 

位置や大きさも細かく指定できるのでとても便利なのです。

 

 

 

backgroundに複数の画像を指定してみる

デモページ

例として、デモページを作成しました。
くま、うさぎ、いぬ、ねこ、草、すべて同じdivにbackgroundとして指定しています。

css_background_1

デモページはこちら

 

 

 

CSS

デモページのdivのCSSは以下のようになっています。
このように一つの要素に対して複数の指定が可能です。

 

 

background-image(もしくはbackgroundでも可)

画像をカンマ(,)で区切ってひとつずつ指定していきます。
重ねたい場合は上に表示させたいものを最初に持ってきます。

 

背景色を指定したい場合は一番後ろに書くことも出来ます。

 

 

background-repeat

画像をリピート表示させるかどうかを指定します。
記述する順番はbackground-imageで記述した順番です。
今回は草の画像をリピートさせたいので5番目をrepeatさせています。

 

 

background-position

画像を表示させる位置を指定します。
background-repeat同様、記述した順番で指定できます。
left やtopだけではなく
background-position:X方向 Y方向
というpxや%などの数値でも指定が可能です。

 

 

background-size

今回は使用していませんが、position同様に記述した順番に並べ、
pxや%などの数値で指定することが可能です。

 

 

 

まとめ

以上、CSSで背景画像(background)を複数指定する方法をご紹介しました!
複数指定できるのはとっても便利ですし、無駄を省き綺麗なソースを書くことが出来ます。
これは使えますな(。-`ω-)

ブログ作成者4
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00