<img>画像を重ねて表示させる。
これって、初心者の人だとむずかしい指定です。
画像を2つ指定し、さらにpositionやz-indexで調整して…
と、まあまあ大変。
ですが、背景画像ならたった1つの指定で重ねられます。
合わせてレスポンシブのやり方も紹介しますので、ご覧ください。
背景画像を重ねて表示する指定の書き方
さっそくですが、背景画像を重ねる指定の書き方はこちら。
background-image: url(画像1),url(画像2),url(画像3)
スマホの人はスクロールしてください。
指定する画像を , (カンマ)で区切って書き足していくだけ。
重なり順は1番上が画像1、1番下が画像3です。
画像の重ね方が分かったので、次で例をあげて指定してみます。
背景画像を重ねつつレスポンシブする指定
ここから背景画像を重ねつつレスポンシブまで実現します。
使用する画像
分かりやすいよう大きさの違う画像を用意しました。
こちらです。
大きさも確認しましょう。
「メモの画像」は、背景を透過させています。
※透過画像の作り方は、『ひゃくやっつ』さんのサイトをご覧ください。
【参考外部サイト】透過PNG画像をMac標準アプリ「プレビュー」で簡単に作る
レスポンシブに必要な指定
背景画像をレスポンシブするには、次の2つの指定が必要です。
- background-size
- background-position
2つを頭に入れて読み進めましょう。
①画像を表示する
まずは、「靴の画像」から表示させます。
<body>
<div>
</div>
</body>div {
height: 400px;
background-image: url(shoes.png);
}※<div>には高さを指定しています。なぜ高さまで指定するんだろうと思った方は、こちらをご覧ください。
【参考記事】background-imageとbackground-repeatの使い方
次に、「メモの画像」を乗せていきますね。
書き方はこちらでしたね。
background-image: url(画像1),url(画像2),url(画像3)
スマホの人はスクロールしてください。
重なり順も、もう1度どうぞ。
1番上が画像1、1番下が画像3となります。
<body>
<div>
</div>
</body>div {
height: 400px;
background-image: url(memo.png),url(shoes.png);
background-repeat: no-repeat,no-repeat;
}
「靴の画像」の上に「メモの画像」が乗りましたね。
ちなみに画像は繰り返し表示したくないので、どちらにもno-repeatを指定します。
background-repeatの指定は以下のように , (カンマ)で区切りで2つ値を指定。
値は、backgroud-imageで指定した画像の順番で適用されます。
次で、画像サイズを指定しましょう。
【参考記事】background-imageとbackground-repeatの使い方
②画像サイズを指定(レスポンシブ化)
レスポンシブ化できるよう背景画像のサイズを指定します。
<body>
<div>
</div>
</body>div {
height: 400px;
background-image: url(memo.png),url(shoes.png);
background-repeat: no-repeat,no-repeat;
background-size: auto,cover;
}background-sizeに指定する2つの値も , (カンマ)で区切ります。
値は、ここでもbackgroud-imageで指定した画像の順番で適用。
「靴の画像」は、background-size: coverを指定しました。
coverだと<div>の幅が変化しても、画像は<div>エリアを覆い続けます。
これで「靴の画像」サイズのレスポンシブ化ができました。
「メモの画像」のautoでは、画像本来の大きさ(300×100px)で表示。
小さい画像なので、こちらはレスポンシブ化はしません。
【参考記事】background-sizeの使い方
③位置を調整する(レスポンシブ化)
画像位置を調整するので、background-positionを指定。
レスポンシブ化するため％で指定します。
<body>
<div>
</div>
</body>div {
height: 400px;
background-image: url(memo.png),url(shoes.png);
background-size: auto,cover;
background-repeat: no-repeat,no-repeat;
background-position: 50% 0%,50% 50%;
}
background-positionも2つの画像に指定。
この指定も背景画像と同じ順番で適用されます。
「メモの画像」は<div>エリアの50% 0%(横 縦)。
「靴の画像」は50% 50%の位置に。
↓これで、画面の大きさが変化しても2つの画像の位置は変わりません。
background-positionのレスポンシブができていますね。
というわけで完成です。
なんだかよく分からない組み合わせですが…
【参考記事】background-positionの使い方
1番下の背景画像に透明度をかけて表示させたい場合
下地となる背景画像を、透過したい時の指定です。
しかし、背景画像の複数指定ではこれを実現できません。
ですので、この場合は上からのせる画像を<img>に指定します(ここではメモの画像)。
くわしくは、こちらをご覧ください。
【参考記事】
「画像を透過させるopacity」の『文字はそのままで、背景画像だけを透過する方法』
クリックすると該当箇所にジャンプします。
上記の参考記事で、文字を<img>画像に置き換えると実現できます。
【応用】重ねた背景画像に文字をのせる
今度は、画像に文字を重ねてみます。
先ほどのコードの<div>の中に文字を入れて表示させると、左上に位置。
<body>
<div>
靴とメモ
</div>
</body>
ちなみに<div>のheight: 400pxを指定しない場合。
以下のように、文字の高さぶんしか背景画像も表示されません。
理由は、高さが未指定だとheightは初期値autoとなるから。
結果、<div>の高さ = 文字の高さとなります。
※くわしくは、background-imageの「要素の中身が空だと背景画像が表示されない」をご覧ください。
クリックすると、該当箇所にジャンプします。
話を戻しますね。
文字を少し中に入れてみましょう。
div {
padding-left: 50px;
padding-top: 50px;
}
/* 画像の指定など省略 */
padding-leftで左から50px、padding-topで上から50pxに位置。
右側に置きたい場合は、<div>にtext-align: rightとすればオッケーです。
その上で、padding-right: 50px、padding-top: 50pxとすれば、文字が内側に入ります。
div {
text-align: right;
padding-right: 50px;
padding-top: 50px;
}
/* 画像の指定など省略 */
こんなふうに。
さらに、もっと自由に文字の位置を動かしたい場合。
例えば、上の図のように画像の右下やど真ん中に文字を置きたいケース。
パディングでできなくもないですが、位置を調整するのが大変。
なので、こういう時はpositionを使う方が便利です。
やり方は、画像の上に文字をのせつつ、中央に置くを参考にしてみて下さい。
【補足】背景画像と背景色
背景色は背景画像よりも下になります。
画像よりあとに指定してもです。
以下で、「靴の画像」の位置を100px右、50px下にずらしてみました。
<body>
<div>
</div>
</body>div {
height: 400px;
background-image: url(memo.png),url(shoes.png);
background-size: auto cover;
background-repeat: no-repeat,no-repeat;
background-position: 50% 0%,100px 50px;
background-color: #e5e5e5; /* うすいグレー */
}
うすいグレーの背景色が見えました。
もし背景画像と背景色を組み合わせたい場合は、透過画像を使うといいかもしれません。
参考サイト
この記事はCSS3をもとに書きました。
CSS3とはcssのルールブックみたいなもので、その最新版です。
どちらも翻訳ありです。
むずかしめに書かれてるので、余裕のある方だけご覧ください。
まとめ
今回は、背景画像を重ねてみました。
まずは2つの画像を表示させる。
それからサイズや位置調整をし、レスポンシブさせましょう。
文字の上に画像を重ねる指定方法
下の記事は先ほども紹介した、画像の上に文字を置く指定についてです。
文字の配置が自由でにできるようになります。
