閉じる

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. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る