閉じる

CSS背景画像の設定(background-image)

background-image:

CSSの背景で表示するbackgroundの設定で、一般的によく使う設定を紹介します。

CSSで画像を背景に設定する

CSSで背景を画像に設定する場合は、下記のように記載します。

background-image: url(イメージファイル名);

例えば、<div class=”sample1″>

に、haikei.pngを背景に設定する場合は、CSSの中に下記のように記載します。

.sample1 {
background-image: url(haikei.png);
}

これが基本です

背景画像を表示されない

背景画像が表示されないケースで多いのが、イメージファイル(例でいうと、haikei.png)のパスが間違っていることです。

相対パスで表示されない場合、絶対パス(http://ドメイン/イメージまでのパス)を設定して表示されるかどうか確認しましょう。

背景画像の繰り返し・リピート(background-repeat)

背景画像は、繰り返し表示する事も可能です。

その場合、
background-repeat で設定します。

例えば、

.sample1

に、haikei.png画像を全面タイルのように繰り返し、リピートする場合は、CSSの中に下記のように記載します。

.sample1 {
background-image: url(haikei.png);
background-repeat: repeat;
}

これで、リピートされます。

逆にリピートさせたくない場合は、
no-repeat; を
background-repeat: に指定します。

.sample1 {
background-image: url(haikei.png);
background-repeat: no-repeat;
}

背景画像のサイズ変更(background-size)

背景画像のサイズの変更、縮小サイズもCSSで指定できます。

background-size

にサイズを指定すれば、変更できます。

90%に縮小した例です。

.sample1 {
background-image: url(haikei.png);
background-repeat: repeat;
background-size: 90%;
}

ピックアップ記事

  1. 先日、Windows11の機能や無償アップグレードなどがMicrosoftから発表されました。…
  2. 2021年WEB制作やネットショップで利用できる補助金について2021年の補助金の公募が開始…
  3. Google Search Console(サーチコンソール)で、「パンくずリスト「WebサイトUR…
ページ上部へ戻る