CSS

【CSS】background-imageの基本解説|使い方と調整

 

イケゾー
この記事は、こんな人におすすめ!
・背景画像の設定方法がわからない
・思い通りに調整ができない
・background-imageの基本を知りたい

 

このような疑問にお答えします。

 

本記事の内容

  • background-imageで何ができるのか
  • background-imageの使い方
  • 【よく使うテクニック】背景画像の調整と複数指定

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

背景画像の設定はサイト制作でよく使うスキルです。
思い通りに設定できなくて、お悩みの方もいるのではないでしょうか。

これだけ読めば、背景画像「background-image」は完璧です。
それでは、どうぞ!

 

 

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

background-imageで何ができるの

 

background-imageは、上記のように背景に画像を指定するプロパティです。

 

background-imageの使い方

では、使い方を解説していきます。
下記のHTMLとCSSを基本に進めていきます。

HTML
<div class="bg_test">

  <div class="bg_test-text">

    background-imageのデモ

  </div>

</div>

 

CSS
.bg_test {

	text-align: center; /* 文字中央寄せ */

	padding: 150px; /* 余白指定 */

	border: solid 2px; /* 枠線指定 */

}

.bg_test-text {

 border: solid 1px; /* 枠線指定 */

 display: inline-block; /* インラインブロックにする */

 padding: 10px 20px; /* 余白指定 */
 
 background-color: #fff; /* 背景色指定 */

}

 

CSS

背景画像の設定は下記の通り。

.bg_test {

	background-image: url(画像のパス);

}

画像のパスには、絶対パスまたは相対パスを入力しましょう。
>>画像のパスの設定方法を知りたい

 

基本的な使い方は以上です。

実案件では、画像の大きさや位置を調整するケースが多いです。
とても簡単なのでおさえておきましょう。

細かな設定も見ていこう
イケゾー

 

背景画像の大きさを調整する

指定した画像サイズが大きすぎる場合、下のようになります。

 

こういった場合は、画像サイズを調整しましょう。
background-sizeを指定するだけです。

CSS
.bg_test{

 background-size: サイズの指定;

}

 

サイズの指定には、下記を使用します。

指定する値 画像のサイズ
auto 元画像のまま
contain 元画像の縦横比は保持して、要素に元画像が全て収まるサイズに調整
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズに調整
値(px) pxでサイズを指定
値(%) 要素に対しての割合でサイズ指定

 

僕の場合は、coverをよく使いますね。
さっきの例で、coverを使ってみると、下のようになります。

元画像をうまく配置してくれていますね。

とりあえずcoverを覚えておこう
イケゾー

 

背景画像の位置を調整する

背景画像は、指定がなければ左上に配置されます。

 

要素の中央や、10pxだけ下に配置したいといった調整も簡単にできます。
background-positionを指定するだけです。

CSS
.bg_test{

background-position: 横の位置 縦の位置;

}

 

位置の指定には、下記を使用します。

指定する値 画像の位置
言葉で指定 center、right、left、top、bottomを使って指定する
値(px) 要素の左上からの位置を、pxで指定する
値(%) 要素の左上からの位置を、要素を基準にした%で指定する

 

中央の上端に配置したい場合は、次のようになります。

CSS
.bg_test{

background-image: url(画像のパス);

background-position: center top;

}

 

位置の調整も簡単だね
イケゾー

 

背景画像を繰り返す

背景画像を、繰り返して壁紙を作ることも可能です。

 

これまで通りに、背景画像をひとつ表示しましょう。

そして、background-repeatを指定します。

CSS
.bg_test{

background-repeat: 繰り返しの指定;

}

 

繰り返しの指定には、下記を使用します。

指定する値 繰り返し
repeat 要素の全面にリピートする
repeat-x X(横)方向にリピートする
repeat-y Y(縦)方向にリピートする
no-repeat リピートしない

 

うまく使うと面白いデザインになるね
イケゾー

 

背景画像を複数指定する

背景画像は、複数指定して重ねることもできます。

CSS
.bg_test{

background-image: url(前面に表示する画像のパス),url(背面に表示する画像のパス);

}

 

 

このように、画像を重ねて表示できます。
サイズ、繰り返し、位置についても同様に、前面の画像→背面の画像の順に指定します。

CSS
.bg_test{

background-image: url(三角形画像のパス),url(風景画像のパス);

background-size: auto,cover;

background-repeat: no-repeat,no-repeat;

}

 

ここまで出来れば背景画像マスターです
イケゾー

 

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

背景画像「background-image」の使い方を解説しました。

 

ポイント

・背景画像を指定する「background-image」の使用方法

・大きさや位置、繰り返しを設定できる

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS