レスポンシブな背景画像にコンテンツを重ねて表示させる３つの方法

ここしばらくの間フルスクリーン画像を使ったサイトデザインの人気が高まっています。

実は「背景画像の上にボタンを設置するデザイン」というのは少し厄介で、レスポンシブ化する際に幾分かの調整が必要になります。

今回はこの「背景画像の上にボタンなどのコンテンツを、『中央寄せ』で配置する」方法を３パターンご紹介します。

それぞれメリット・デメリットがありますので、使用したい場面にあわせてお使いください。

１：absoluteとmarginを組み合わせる

サンプル１

この方法では画像をimgタグで記述し、上に表示されるコンテンツをposition:absoluteで移動させます。

おそらく最もシンプルで用いられることが多いパターンではないかなと思います。

画像を中心に配置することができますので、比較的シンプルに実装させることが可能です。

デメリットとしては、absoluteさせたコンテンツをセンタリングさせるために若干HTMLとCSSが複雑になることがあります。

サンプルコード

<div id="row-1st">
    <img src="http://jsrun.it/assets/4/T/8/j/4T8jS.jpg">
    <div id="row-1st-in">
        <div>
            <p>
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
            </p>
        </div>
    </div>
</div>

#row-1st {
    position: relative;
     > img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}
#row-1st-in {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.7);
    > div {
        width: 90%;
        max-width: 320px;
        margin: 0 auto;
        font-size: 1rem;
        line-height: 1.7;
        padding: 20px 0;
    }
}

@media only screen and (max-width: 480px) {
    #row-1st {
        overflow: scroll;
    }
    #row-1st-in {
        width: 100%;
    }  
}

２：background-image&cover

サンプル２
２つ目の方法は、背景画像として配置するパターンとなります。

background-imageで背景画像を設定し、background-size: coverでレスポンシブに変形するように調整します。

背景画像の表示領域はpaddingやmargin、heightなどでそれぞれ指定する方法です。

この方法のメリットは「１よりもシンプルなコードが書けること」や「デバイス幅に応じて背景画像を切り替えれること」などです。

デメリットについては、「背景画像の表示領域を固定値で取るために調整が難しい」という点が挙げられます。

表示速度を犠牲にしますが、jQueryなどを用いて調整するのも手かもしれません。

サンプルコード

<div id="row-2nd">
    <p id="row-2nd-in">
        親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
    </p>
</div>

#row-2nd {
    position: relative;
    background: url(http://jsrun.it/assets/c/Y/R/o/cYRo8.jpg) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 50px 0;
}
#row-2nd-in {
    background-color: rgba(255,255,255,0.7);
    padding: 50px 10px;
    margin: 0 auto;
    width: 90%;
    max-width: 350px;
    font-size: 1rem;
    line-height: 1.7;
}

@media only screen and (max-width: 480px) {
    #row-2nd {
        overflow: scroll;
    }
    #row-2nd-in {
        width: 100%;
    }  
}

３：クリッカブルマップ

３つ目の方法はかなり特殊です。

ボタンなどを全て「１枚の画像として作成し、mapタグでリンクを個別に設定する」という方法となります。

これは「Responsive Image Maps jQuery Plugin」というjQueryプラグインを用いることで実現可能です。