ＣＳＳで背景画像を複数設定する方法があります。
複数画像を背景にするときは、以前はdivタグを複数重ねて無理やり設定したりしていましたが、一つのタグ内で、複数背景画像を設定できるのはとても便利だなと思いました。
今回さらにこの複数背景画像を使用した事例で、頭をひねることがありました。
スマホ表示時と、ＰＣ表示時で背景画像の大きさを個別に変更したい。
ＣＳＳで背景画像サイズをまとめて変更することはできます。
background-size: を指定すれば、背景画像サイズを変更できます。
ですが、今回は複数背景画像一つ一つのサイズをそれぞれ異なるサイズにしたいのです。
スマホ表示に合わせて、背景画像の大きさを調整するためです。
そんなことが果たして可能なのか?
調べて対処できましたので、備忘録として記録いたします。
今回やりたいこと
今回やりたいことは、以下のようなことです。
複数の背景画像を個別にサイズ変更をしたいのです。
ベースとなるソース
今回は、複数背景画像を設定した以下のＨＴＭＬソースをもとに、背景画像個別サイズ変更を行います。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>背景設定</title>
<style type="text/css">
.box
{
background:
url(blue.gif) no-repeat left center,
url(yellow.gif) no-repeat center center,
url(red.gif) no-repeat right center;
display: block;
height: 600px;
width: 1200px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
スタイルシートで、3つの円の画像を左、中央、右に配置しています。
この記述に、画像別にサイズの指定を付け足します。
いったいどうやればよいのでしょうか?
複数の背景画像にそれぞれ個別にサイズを指定する方法
結論からですが、以下のように記述すれば、背景画像のサイズを個別に変更できます。
.box
{
background:
url(blue.gif) no-repeat left center / 100px auto,
url(yellow.gif) no-repeat center center / 320px auto,
url(red.gif) no-repeat right center / 600px auto;
display: block;
height: 600px;
width: 1200px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
}
一見どこが変わったの?
という感じですが、よく見ると以下の部分が変わっています。
url(blue.gif) no-repeat left center / 100px auto,
url(yellow.gif) no-repeat center center / 320px auto,
url(red.gif) no-repeat right center / 600px auto;わかりますでしょうか?
/ を挟んで、「100px auto」という記述があります。
これが個別サイズ指定になります。
個別に背景画像サイズを変更する記述文法
なんだかわかるような、わからないようなですが、具体的に解説します。
まず背景画像を複数設定する場合は、
url([画像URL]) [リピート] [横位置] [縦位置] を複数行記述します。
これを 以下のように記述します。
url([画像URL]) [リピート] [横位置] [縦位置] ／ [横サイズ] [縦サイズ]
スラッシュを挟んで記述します。
画像単位でサイズを指定できるためわかりやすいです。
background-size: を使用して、複数背景画像のサイズを個別に指定する方法もありますが、私は／を挟んで記述するやり方のほうが直感的に理解できるので、こちらのやり方を使用しています。
ＰＣ版とスマホ版の背景画像切り替えに必要なテクニック
今回の内容は、ＰＣ用ブラウザでの背景画像表示であれば、特に必要のない内容です。
1枚画像にして、普通に背景画像とすればよいのですから。
ですが、レスポンシブでスマホに表示する際に、とても役に立ちました。
スマホはＰＣと違い、余分な背景用の余白がほとんどありません。
そのため、背景画像の設置はスマホデザインに合わせて「割合」で調整する必要があります。
割合で考えると、背景画像ごとにサイズ調整する必要が出てきます。
なぜならば、等倍だとスマホ画面ではみ出たりするからです。
調整する手間は大変ですが、ＰＣ版とスマホ版で、デザインの類似性を保つには必要な方法です。
私はＰＣ版のデザインからスマホ版のコーディング起こしをしますが、背景画像はＰＣ版のものを使用するため、サイズ合わせ、デザイン合わせの意味で今回のやり方はとても役に立ちました。