CSS - background-image

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

概要

属性名 background-image
<bg-image>#
値の詳細 <bg-image> = <image> | none
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可
サポートhttps://caniuse.com/mdn-css_properties_background-image

説明

背景画像を指定します。

説明
<image>背景画像のイメージを指定します。
none背景画像を表示しません。

使用例

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