このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-image:背景画像

記事Aug. 29th,2018
July 7th,2020
背景画像を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-image: none
適用対象 すべての要素
継承 不可
定義 CSS Backgrounds and Borders Module

background-image”は背景画像を指定するプロパティです。

サンプルコード

div { background-image: url(background_sample.png);}

説明
inherit 親要素のプロパティ値を継承する
none 背景画像を用いないことを示す
<image> url()”関数を使用した画像ファイルもしくはlinear-gradient()”関数などで生成したグラデーションで背景画像を指定

複数の画像を背景に指定する

値を“,(カンマ)”で区切って並べて記述することで複数の画像を背景に指定することができます。
最初に指定した背景が最前面、最後に指定した背景が最背面になるように、重ねて描画されます。

div { background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,〚一番奥の背景画像〛;}

使用例

背景画像を指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: linear-gradient(rgb(66,174,147), rgb(28,20,15));
}

複数の背景画像を指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-repeat: no-repeat, no-repeat, no-repeat;
background-image: url(background_sample.png),url(background_sample2.png),linear-gradient(rgb(255,255,255), rgb(28,20,15));
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク