CSSで一つのタグに複数の背景画像を設定することができます。
以前の記事でも紹介しています。
複数画像をまとめて背景に設定できることで、レスポンシブ対応などに応用ができます。
ところが、今回このようなケースがありました。
複数画像を背景設定し、その中の1枚だけサイズを変更する。
レスポンシブで、スマホ表示の際に特定画像だけサイズを調整する必要がありました。
背景画像サイズは、背景画像指定とは別物です。
はたして特定の背景画像だけサイズを変えることなんてできるのか?
調べて対応できましたので、備忘録として記録いたします。
今回やりたいこと
複数指定している背景画像のうち、1枚だけサイズを大きくします。
こちらのサンプルは、複数画像を背景に設定したサンプルです。
実際にできたものがこちら
実際に1つの背景画像だけ大きくすることができた例がこちらです。
複数同時設定した背景画像のうち、一つだけサイズを変更することができました。
具体的な設定方法
複数同時指定した背景画像のうち、1つだけをどうやって大きくしているのでしょうか？
そのやり方を以下に記載します。
設定前のソース
画像を大きくする前のソースはこちらです。
画像を複数背景に設定しています。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>背景テスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box
{
background:
url(01.gif) no-repeat left top,
url(02.gif) no-repeat right top,
url(03.gif) no-repeat left bottom,
url(04.gif) no-repeat right bottom;
height: 90vh;
width: 90vw;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
画像を1枚だけサイズを大きくしたソース
上記のソースに対し、画像1枚だけ大きくしたソースがこちらです。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>特定の背景画像だけサイズを変える</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box
{
background:
url(01.gif) no-repeat left top,
url(02.gif) no-repeat right top,
url(03.gif) no-repeat left bottom,
url(04.gif) no-repeat right bottom;
height: 90vh;
width: 90vw;
margin-right: auto;
margin-left: auto;
background-size: 300px auto, auto, auto, auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
background-size: 300px auto, auto, auto, auto; と、サイズを背景画像の数だけ指定して実現しています。
今回の例だと、背景画像は4つあるので、background-size: を4つ指定しています。
ちなみに、auto ４つと、300px１つで、5つサイズ指定されているんじゃないの？
と思われがちですが、これで4つの画像サイズ指定になります。
なぜならば、300px auto（1個目の画像サイズ指定）,auto（2個目の画像サイズ指定）,auto（3個目の画像サイズ指定）,auto（4個目の画像サイズ指定）という意味だからです。
1個目だけ、横サイズと縦サイズを別々に指定しているだけで、後の3つは縦横まとめてautoという意味なのです。
ここが少しわかりにくかったです。
ちなみに次のような記述方法でもＯＫでした
上記の記述方法は、なれれば気になりませんが、慣れていないと理屈が分かりにくいです。
ですが以下のような、理屈的にわかりやすい方法もありました。
これだと確かにわかりやすいです。
.box
{
background:
url(01.gif) no-repeat left top / 300px auto,
url(02.gif) no-repeat right top,
url(03.gif) no-repeat left bottom,
url(04.gif) no-repeat right bottom;
height: 90vh;
width: 90vw;
margin-right: auto;
margin-left: auto;
}
background-size:を使用せずに、各画像指定を／で区切ってサイズを指定します。
これならば直感的にどの画像のサイズを指定しているのか、わかりやすいです。
いろんなやり方を駆使して、目的のデザインを構築する
よく売り文句として、「自由にレイアウト」「思い通りのデザインにできる」というものがあります。
ですが実際に試してみると、そうはなりませんでした。
なぜならば、webで本当に思い通りのデザイン作るためには、簡単ではない技術が必須だからです。
レスポンシブのことを考慮しながらだとなおさらです。
webデザイナーやコーダーとは、レスポンシブで変形することを前提にレイアウトを考えなければいけません。
その際に大事なのは、ＰＣ版の雰囲気を可能な限り残すことです。
ＰＣで横長のレイアウトがスマホになると縦長になるため、ガラリとレイアウトは変わります。
だけれども、同じサイトである印象を残すことが腕の見せ所といえます。
その際に、背景画像一つとっても、微調整できるようにすることはとても大事なのです。