【css】背景に複数の画像を配置する

概要

cssのbackgroundで画像を指定する場合、例えば下記のように指定します。

background: url(./img/gazou.png);

大抵の場合は画像を1つだけ指定し、パターンとして繰り返し表示したり、要素いっぱいに表示したりします。
ただ、少し凝ったデザインをした際に、背景画像を複数指定できればソースコードがごちゃごちゃしなくていいのに...と思ったことが過去にあって、当時色々調べた結果、backgroundには複数の画像を指定することができることがわかり、衝撃をうけました。

その方法がこちら


background:
　　　　url(./img/hidari.png) left no-repeat,
　　　　url(./img/migi.png) right no-repeat;

見たまんまなんですが、画像のパスをカンマで区切って指定するだけです。簡単！
あとは画像の表示位置を指定し、no-repeatで繰り返し表示されないようにすれば、要素の左端に1つ目の画像、右端に2つ目の画像、要素の幅が変わっても大丈夫、なんてことができます。

サンプル

次のようなデザインで、文字数によってサイズが変わるボタンを作りたいと思います。

まずは上記ボタンの画像を「左端」「真ん中の繰り返し部分」「右端」に切り分け、それぞれ名前をつけて保存します。

ソースは以下のとおりです。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
        <a class="mybtn" href="#"><span>ボタン</span></a>
        <a class="mybtn" href="#"><span>テキスト量で可変可能</span></a>
    </div>
</body>
</html>

style.css


/* ボタン左右端の装飾 */
.mybtn {
    display: inline-block;
    height: 50px;
    padding: 0 15px;
    background:
        url(./left.png) left no-repeat,
        url(./middle.png) right no-repeat;
}
/* ボタンの中身の装飾 */
.mybtn span {
    display: inline-block;
    min-width: 60px;
    color: #333;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
    background: url(./right.png);
}

表示結果は以下のようになります。