Kaffee

[ad_tag id=”1828″]

ブロックレベル要素に背景画像を入れる時のCSSコードってどうだっけ?

ブロックレベル要素に背景画像を入れられることはわかっている。

背景画像の繰り返し表示の設定ができることもわかっている。

背景画像のサイズを設定できることも、表示ポジションを設定できることも、オーバーレイを設定できることもわかっている。

でも、コード(英単語!)がうろ覚えで毎回ネットで調べてしまうのですよ。

「a」だっけ?とか、「r」だっけ?いや、「l」だったっけ?とかね…

スペルミスに気づかずに、「思うように表示しない!」でハマってしまうと時間の無駄遣い!恥かしい…

[ad_tag id=”1832″]

方法

ブロックレベル要素の背景画像指定(background-image)

まずはブロックレベル要素に背景画像を指定します。

セレクタ { background-image: url(画像のURL); }

そうです。

コードは至って簡単!

<div class=”bgimg”>
    <div class=”bgimg-text”>
        <p>背景画像</p>
    </div>
</div>
.bgimg-text{
    margin: 0 auto;                             /* ブロック中央配置指定 */
    text-align: center;                         /* 文字中央揃え指定 */
    border: solid 1px;                          /* 枠線指定 */
    display: inline-block;                      /* インラインブロックにする */
    padding: 10px 20px;                         /* 余白指定 */
    background-color: rgba(255, 255, 255, 0.7); /* 背景色指定 */
}
.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
}

実際の表示はこうなります。

背景画像

無事、背景画像の配置完了です。

背景画像の繰り返し指定(background-repeat)

指定した背景画像の繰り返し表示の設定です。

セレクタ { background-repeat: 繰り返しの指定; }

先程のブロックレベル要素の背景画像を変更して説明します。

<div class=”bgimg”>
    <div class=”bgimg-text”>
        <p>背景画像</p>
    </div>
</div>
.bgimg-text{
    margin: 0 auto;                             /* ブロック中央配置指定 */
    text-align: center;                         /* 文字中央揃え指定 */
    border: solid 1px;                          /* 枠線指定 */
    display: inline-block;                      /* インラインブロックにする */
    padding: 10px 20px;                         /* 余白指定 */
    background-color: rgba(255, 255, 255, 0.7); /* 背景色指定 */
}

全面(縦横)に繰り返し表示(repeat)

デフォルトの設定です。

セレクタ { background-repeat: repeat; }

と記述できますが、background-repeatを指定していなければrepeatになります。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: repeat;        /* 繰り返しの指定 */
}

実際の表示はこうなります。

背景画像

横方向にだけ繰り返し(repeat-x)

横方向(x軸)だけに繰り返し表示させます。

セレクタ { background-repeat: repeat-x; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: repeat-x;      /* 繰り返しの指定 */
}

実際の表示はこうなります。

背景画像

縦方向にだけ繰り返し(repeat-y)

縦方向(y軸)だけに繰り返し表示させます。

セレクタ { background-repeat: repeat-y; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: repeat-y;      /* 繰り返しの指定 */
}

実際の表示はこうなります。

背景画像

繰り返し表示をしない(no-repeat)

一つだけ表示させて、縦にも横にも繰り返しません。

セレクタ { background-repeat: no-repeat; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: no-repeat;     /* 繰り返しの指定 */
}

実際の表示はこうなります。

背景画像

背景画像の表示サイズ指定(background-size)

ブロックレベル要素の表示サイズに対して、背景画像のサイズを指定します。

セレクタ{ background-size: サイズの指定; }

表示範囲に関係なく、元のサイズのまま(auto)

デフォルトの指定です。

セレクタ{ background-size: auto; }

と記述できますが、background-sizeを指定しなければautoになります。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-size: auto;            /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

元画像の縦横比を維持したまま、画像全体を表示(contain)

元の画像の縦横比を維持したまま、ブロック要素内に元の画像が全て収まるように表示します。

セレクタ{ background-size: contain; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: no-repeat;     /* 繰り返しの指定 */
    background-size: contain;         /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

元画像の縦横比を維持したまま、表示範囲全体に表示(cover)

元の画像の縦横比を維持したまま、ブロック要素全体を覆うように表示します。

セレクタ{ background-size: cover; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-size: cover;           /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

pxで表示サイズを指定(数値(px))

明示的にpxで大きさを指定します。

例えば、例で使用しているHTMLコードの画像は、幅640px、高さ427pxですが、縦横共に100pxを指定してみましょう。

セレクタ{ background-size: 100px 100px; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: no-repeat;     /* 繰り返しの指定 */
    background-size: 100px 100px;     /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

では、セレクタ{ background-size: 300px 100px; }に変更してみましょう。

背景画像

見てのとおり、元の画像の縦横比は無視されます。

要素に対する割合で表示サイズを指定(数値(%))

背景画像を表示させる要素の幅と高さの割合で指定します。

セレクタ{ background-size: 100% 100%; }

と記述します。

.bgimg{
    width: 300px;                     /* 幅指定 */
    padding: 50px 0;                  /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: no-repeat;     /* 繰り返しの指定 */
    background-size: 100% 100%;       /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

では、セレクタ{ background-size: 100% 50%; }に変更してみましょう。

背景画像

これも、元の画像の縦横比は無視されます。

背景画像のポジション指定(background-position)

background-imageは、デフォルトで左上を基準に配置されます。

背景画像の位置を中央や右端に動かしたい場合や、background-size: cover;で背景画像の表示を上下にずらしたい時に使うのがbackground-positionです。

セレクタ{ background-position:  横の位置 縦の位置; }

キーワード指定(center、left、right、top、bottom)

位置を言葉で指定します。使えるキーワードはcenter、left、right、top、bottomです。

セレクタ{ background-position: center center; }

と記述します。

.bgimg{
    width: 300px;                       /* 幅指定 */
    padding: 50px 0;                    /* 余白指定 */
    border: solid 2px;                  /* 枠線指定 */
    background-image: url(bgimg.jpg);   /* 背景画像指定 */
    background-repeat: no-repeat;       /* 繰り返しの指定 */
    background-position: center center; /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

数値(px)指定

位置をpxで指定します。

セレクタ{ background-position: 100px 50px; }

と記述します。

.bgimg{
    width: 300px;                       /* 幅指定 */
    padding: 50px 0;                    /* 余白指定 */
    border: solid 2px;                  /* 枠線指定 */
    background-image: url(bgimg.jpg);   /* 背景画像指定 */
    background-repeat: no-repeat;       /* 繰り返しの指定 */
    background-position: 100px 50px;    /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

数値(%)指定

背景画像を表示させるブロック要素の縦横の割合(%)で位置を指定します。

セレクタ{ background-position: 50% 50%; }

と記述します。

.bgimg{
    width: 300px;                       /* 幅指定 */
    padding: 50px 0;                    /* 余白指定 */
    border: solid 2px;                  /* 枠線指定 */
    background-image: url(bgimg.jpg);   /* 背景画像指定 */
    background-repeat: no-repeat;       /* 繰り返しの指定 */
    background-position: 50% 50%;       /* 画像のサイズ指定 */
}

実際の表示はこうなります。

背景画像

背景画像のオーバーレイ指定

この記事の例では、すでに文字と背景画像の間にブロックレベル要素(divタグ)が入っていて、文字の背景として透過処理が施してあります。

これじゃあカッコ悪い!背景画像全体を暗くしたり明るくしたりしたい!

という場合のコードです。

<div class=”bgimg overlay”>
        <p>背景画像</p>
</div>
.bgimg{
    display: flex;                    /* フレックスコンテナに指定  */
    justify-content: center;          /* 文字の中央揃え */
    position: relative;               /* absoluteの基準指定 */
    width: 300px;                     /* 幅指定 */
    padding: 100px 0;                 /* 余白指定 */
    border: solid 2px;                /* 枠線指定 */
    background-image: url(bgimg.jpg); /* 背景画像指定 */
    background-repeat: no-repeat;     /* 繰り返しの指定 */
    background-size: cover;       /* 画像のサイズ指定 */
}
.bgimg p{
    z-index: 1;                     /* レイヤー指定 */
    color: #FFF;                    /* 文字色指定 */
}
.overlay::after {
    content: "";                    /* レイヤー指定 */
    position: absolute;               /* absolute指定 */
    top: 0;                           /* absolute基準点指定 */
    left: 0;                          /* absolute基準点指定 */
    height: 100%;                     /* オーバーレイの高さ指定 */
    width: 100%;                      /* オーバーレイの幅指定 */
    background: rgba(0, 0, 0, 0.6);   /* オーバーレイの色指定 */
}

display: flex; と justify-content: center;はワンセット。

ブロックをdisplay: flex; でフレックスコンテナに指定することによって、justify-content: center;やalign-items: center;が使えるようになります。

bgimgクラスのposition: relative; は、overlayクラスのposition: absolute;とペアで記述。

absoluteの必須項目としてtop: 0;、left: 0;を記述。

contentは::afterの要素置き換えに必須記述。

実際の表示はこうなります。

背景画像

[ad_tag id=”1836″]

まとめ

いかがでしょうか?

今回は特別なTipsではなく、自分用のメモのような記事になりました。

普段はWordPressのエディタで作業しているので、追加CSSの記述の際や、HTMLコーディングの際に「どうだっけ?」と思ってしまいます。

その度にネットで検索していたりするのですが、自分がよく確認する事項をまとめてみました。

[ad_tag id=”1839″]