使い所はあまり多くありませんが、background-image
プロパティでは、複数の画像を設定することが出来ます。
- 背景画像として複数の画像を設定する方法
- 便利な使い方(Tips)
この記事では、これらを紹介します。
backgroundで背景色や背景画像を設定する方法!background系のプロパティをまだ勉強していない方は、まず上の記事を読んでからの方が良いかもしれません。
💡 コーディングの練習なら模写修行!
この記事の目次
背景画像として複数の画像を設定"しない"場合のデメリット
背景画像として複数の画像を設定する便利さがわかるように、まずは複数の画像に"しない"場合のデメリットを紹介します。
.background {
...
background-image: url(../img/bg02.jpg);
background-position: center;
background-size: cover;
}
上の画像は『木の画像』と『鳥の画像』をセットで1枚の画像としています。この場合、見る環境によって『鳥の画像』が見切れて、おかしな見た目になります。
background-position: bottom right;
にすれば見切れませんが、それはそれで違和感が出るケースも多いです。
また、鳥の画像だけサイズ調整することもできません。
DEMOを用意したので、幅や高さを変更して確認してみてください。スマホで見るともはや『鳥の画像』は見えなくなっているかもしれません。
以上の理由から、仮に今回のようなデザインであれば、下のどちらかの方法をとった方が良いです。
- 【方法1】複数の背景画像を設定する方法
- 【方法2】imgタグとpositionを使う方法
これ以降、上の2つの書き方を紹介します。
【方法1】複数の背景画像を設定する方法
『木の画像』と『鳥の画像』を別々にして、2枚の画像を背景画像とします。こちらの方法がこの記事のメインです。
.background {
...
background-image: url(../img/bird.svg), url(../img/bg.jpg);
background-position: bottom right, center;
background-size: 200px, cover;
background-repeat: no-repeat, no-repeat;
}
このようにbackground-〇〇
系のプロパティは、background-color
以外は全てカンマ区切りで複数設定できます。
重なり順は、前に書いたものほど前面に配置されます。上の例では、bird.svgがbg.jpgより前面に配置されます。
【方法2】imgタグとpositionを使う方法
『木の画像』だけ背景画像で、『鳥の画像』はimgタグで入れてposition配置します。
.background {
...
background-image: url(../img/bg.jpg);
background-position: center;
background-size: cover;
position: relative;
}
.bird {
position: absolute;
right: 0;
bottom: 0;
width: 200px;
}
上のコードで、【方法1】と全く同じ見た目にできます。position
を勉強していれば、なんて事のないコードですね。
【方法1】と【方法2】の違い
- background-positionの値
- position配置する際のtop / bottom / left / rightの値
上の2点は配置の基準が異なるので注意が必要です。中央に配置する場合を例に紹介します。
👇 【方法1】複数の背景画像を設定する方法
/* 🙆♂️ 中央に配置される */
.background {
...
background-image: url(../img/bird.svg), url(../img/bg.jpg);
background-position: 50% 50%, center;
}
👇 【方法2】imgタグとpositionを使う方法
/* 🙅♂️ 中央に配置されない */
.background {
...
background-image: url(../img/bg.jpg);
background-position: center;
}
.bird {
...
top: 50%;
left: 50%;
}
positionで配置する方法は赤い点が親要素に対して50%の位置に配置されます。
background-position
の場合は、親要素に対して何%の位置に配置するかを指定しているわけではありません。
例えば...
.background {
...
width: 1000px;
height: 500px;
background-image: url(../img/bird.svg), url(../img/bg.jpg);
background-position: 50% 50%, center; /* 👈 本当はcenter, center;で良い */
background-size: 200px, cover;
}
※ 説明のために『鳥の画像』の位置を50% 50%
としていますが、本来center
とすれば良いです。
- 背景領域のwidthが1000px / heightが500px
- 『鳥の画像』のサイズが横200px / 縦200px
- background-position: 50% 50%, center;を指定
鳥の画像の横軸の位置 = ((背景領域のwidth) - (鳥の画像の横のサイズ)) × n%
= (1000px - 200px) × 50%
= 400px
縦軸の位置の計算も同じです。positionのように1000pxの50%で500pxの位置に配置されるわけではありません。
【応用】画像の上に半透明のレイヤーを載せる方法
.background {
...
background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url(../img/bg.jpg);
}
- background-imageはグラデーション背景にできる
- background-imageで複数の背景画像の設定できる
これらを利用しています。
グラデーションを使っても、同じ色から同じ色へのグラデーションであれば、1つの色になることを利用しています。
CSSで背景をグラデーションにする方法を解説!グラデーションに関しては、上の記事で詳しく紹介しています。
擬似要素を使ったテクニックがよく紹介されていますが、今回の方法の方がスッキリ書けます。また、他の用途で擬似要素が使いたくなる場合も困りません。
超実務向け!コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ!
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?嬉しい声もいただいています!
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet