最近、ブラウザ画面いっぱいに広がるきれいな写真画像を使ったサイトをよく見かけるようになりました。

華やかな反面、この画像のサイズがあまり大きくなりすぎると、非力なPCや接続スピードが遅い環境ではストレスが生じます。また、SEO的にも推奨されません。さらにその大きな画像のままレスポンシブデザインに対応させている場合は、スマホやタブレットを使用している閲覧者に対して、無駄な容量を消費させることになります。

そこでいくら拡大しても劣化せず、内容によってはごく軽く済むsvg画像を背景に使ったレスポンシブデザインを試してみました。

背景画像のアスペクト比の問題（期待した縦サイズにならない）

boxなどの背景に縦横ぴったりの1枚画像を使う場合、アスペクト比（横サイズと縦サイズの比率）に注意しないと正しく表示されません。実画像をそのままimgとして使う場合は、横サイズが決まれば、縦サイズはアスペクト比に沿った値が自動で決まり、そのサイズを画面上で確保してくれます。次のCSS指定と同じになります。

  width: 100%; 
  height: auto;

ところが、背景画像を使用する場合、親要素のboxのサイズから横サイズを決めても、boxの縦サイズは構成する内包要素によって決まってしまうため、期待した高さをautoで確保できません。。次の指定は、上のCSSと同じ意味になりますが、背景画像の表示は縦半分ほどになっています。

CSSソース

    .svgbg {
        background: url("svg/kumo.svg") no-repeat;
        background-size: 100% auto;
        }

htmlソース

<div class="wrap_svgbg">
    	<div class="svgbg">
            	<div class="title"><img src="svg/logo5.svg"></div>
                <div class="read">コニファとは，マツやスギも含まれる針葉樹（conifer、coniferophyta）
			の総称です。冬でも葉が落ちず、大きくなるにつれて枝葉が広がっていくのが特長です。
			そんなコニファの姿にちなんで、「どんな困難な時もじっと耐えながら、独自技術や
			お客様との関係という枝葉を確実に伸ばしていく企業になりたい」との思いが込められています。
            	</div>
        </div>
</div>

背景画像のアスペクト比を元の画像と同じする方法

横サイズを基にアスペクト比から算出した縦サイズの値（%）を「:before疑似要素」により、予め「padding-top: 41%;」のように親要素のboxに指定して、領域を確保します。次に上と同じく「background-size: 100% auto;」を指定します。

CSSソース（htmlソースは同じです）

    .wrap_svgbg {
        position: relative;
        width: 100%;
        }
    .wrap_svgbg:before {
        content:"";
        display: block;
        padding-top: 41%; 
        }
    .svgbg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url("svg/kumo.svg") no-repeat;
        background-size: 100% auto;
        }

上のリンク先のページを、スマホやタブレットから、また、PCのブラウザのサイズをいろいろ変更してご覧下さい。劣化の無いsvg背景画像のサイズがアスペクト比を維持したまま縮小拡大します。