ホーム » Web制作 » HTML/CSSの書き方備忘録 » 【HTML/CSS】ブロックレベル要素に背景画像を入れる時のCSSの記述方法(background-xxxx)
[ad_tag id=”1828″]
ブロックレベル要素に背景画像を入れられることはわかっている。
背景画像の繰り返し表示の設定ができることもわかっている。
背景画像のサイズを設定できることも、表示ポジションを設定できることも、オーバーレイを設定できることもわかっている。
でも、コード(英単語!)がうろ覚えで毎回ネットで調べてしまうのですよ。
「a」だっけ?とか、「r」だっけ?いや、「l」だったっけ?とかね…
スペルミスに気づかずに、「思うように表示しない!」でハマってしまうと時間の無駄遣い!恥かしい…
[ad_tag id=”1832″]
まずはブロックレベル要素に背景画像を指定します。
セレクタ { 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: 繰り返しの指定; }
先程のブロックレベル要素の背景画像を変更して説明します。
<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); /* 背景色指定 */
}
デフォルトの設定です。
セレクタ { background-repeat: repeat; }
と記述できますが、background-repeatを指定していなければrepeatになります。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-repeat: repeat; /* 繰り返しの指定 */
}
実際の表示はこうなります。
背景画像
横方向(x軸)だけに繰り返し表示させます。
セレクタ { background-repeat: repeat-x; }
と記述します。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-repeat: repeat-x; /* 繰り返しの指定 */
}
実際の表示はこうなります。
背景画像
縦方向(y軸)だけに繰り返し表示させます。
セレクタ { background-repeat: repeat-y; }
と記述します。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-repeat: repeat-y; /* 繰り返しの指定 */
}
実際の表示はこうなります。
背景画像
一つだけ表示させて、縦にも横にも繰り返しません。
セレクタ { 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になります。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-size: auto; /* 画像のサイズ指定 */
}
実際の表示はこうなります。
背景画像
元の画像の縦横比を維持したまま、ブロック要素内に元の画像が全て収まるように表示します。
セレクタ{ background-size: contain; }
と記述します。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-repeat: no-repeat; /* 繰り返しの指定 */
background-size: contain; /* 画像のサイズ指定 */
}
実際の表示はこうなります。
背景画像
元の画像の縦横比を維持したまま、ブロック要素全体を覆うように表示します。
セレクタ{ background-size: cover; }
と記述します。
.bgimg{
width: 300px; /* 幅指定 */
padding: 50px 0; /* 余白指定 */
border: solid 2px; /* 枠線指定 */
background-image: url(bgimg.jpg); /* 背景画像指定 */
background-size: cover; /* 画像のサイズ指定 */
}
実際の表示はこうなります。
背景画像
明示的に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-imageは、デフォルトで左上を基準に配置されます。
背景画像の位置を中央や右端に動かしたい場合や、background-size: cover;で背景画像の表示を上下にずらしたい時に使うのがbackground-positionです。
セレクタ{ background-position: 横の位置 縦の位置; }
位置を言葉で指定します。使えるキーワードは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で指定します。
セレクタ{ 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″]