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	背景画像を表示しません。

使用例

.test1 {
    color: black;
    background-image: url(./image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

<div class="test1">こんにちわ</div>

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

.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;
}

<div class="test2">こんにちわ</div>

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

.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;
}

<div class="test3">こんにちわ</div>

関連項目

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

リンク

• http://www.w3.org/TR/css3-background/#the-background-image
• https://developer.mozilla.org/ja/docs/Web/CSS/background-image
• http://caniuse.com/#search=CSS%202.1%20properties
• http://caniuse.com/#feat=css-gradients

---