CSS - background-image

トップ > CSSリファレンス > background-image

概要

属性名 background-image
<image>[, <image>]*
値の詳細 <image> = <url> | <gradation> | none
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
基本CSS13.01.01.03.51.0
複数背景CSS39.03.61.0(有り)1.3
グラデーションCSS3103.6(-moz)
16
1.0(-webkit)
26
11(-o)
12.1
4.0(-webkit)
6.1

説明

背景画像を指定します。

説明
none背景画像を表示しません。
<url>背景画像のURLを指定します。
<gradation>グラデーションを指定します。詳細はサンプルを参照してください。

使用例

CSS
.test1 {
    color: black;
    background-image: url(./image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}
HTML
<div class="test1">こんにちわ</div>
表示
こんにちわ

背景を複数指定するサンプルを下記に示します。

CSS
.test2 {
  background-image:
    url(./image/back-green.gif),
    url(./image/back-red.gif),
    url(./image/back-red.gif),
    url(./image/back-green.gif);
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}
HTML
<div class="test2">こんにちわ</div>
表示
こんにちわ

背景にグラデーションをかけるサンプルを下記に示します。

CSS
.test3 {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0), #fff),
    url(./image/back.gif);
  background-repeat:
    no-repeat,
    repeat;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}
HTML
<div class="test3">こんにちわ</div>
表示
こんにちわ

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-image.htm