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

background:背景

記事Feb. 15th,2021
要素の背景を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

background”プロパティは要素の背景に使用する色や背景、背景画像の大きさや配置位置などをまとめて指定するプロパティです。

要素の背景は既定ではボーダーの外縁までの領域に描画されます。また、要素にボーダーやコンテンツがあればそれらの背後に描画されます。

CSSのボックスモデル

サンプルコード

div { background: rgb(204,153,204) url(background_sample.png) repeat-x center fixed content-box;}

必要な値を半角スペース(“ ”)で区切って、<background-color>”値<bg-image>”値<repeat-style>”値<attachment>”値は1個ずつ、“<box>”値は1個もしくは2個指定できます。

初期値のままで良い値は省略できます。また、値を記述する順番は自由ですが、<bg-size>”値<bg-position>”値の直後にスラッシュ(“/”)で区切って記述しなければなりません。

<box>”の指定が2個である場合は、1個目の値は背景画像の配置領域(background-origin”プロパティ)2個目の値は背景の表示領域(background-clip”プロパティ)を指定します。“<box>”の指定が1個の場合はその値が背景画像の配置領域と背景の表示領域の両方を設定します。

div { background-image: 〚“<background-color>”値〛 〚“<bg-image>”値〛 〚“<bg-position>”値〛/〚“<bg-size>”値〛 〚“<repeat-style>”値〛 〚“<attachment>”値〛 〚“<box>”値〛 〚“<box>”値〛;}

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

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

それぞれのレイヤーについて必要な値を任意で記述することができますが、<background-color>”値は最背面となるレイヤーにのみ指定することができます。

background-image:
〚一番手前の背景の“<bg-image>”値〛 〚一番手前の背景の“<bg-position>”値〛/〚一番手前の背景の“<bg-size>”値〛 〚一番手前の背景の“<repeat-style>”値〛 〚一番手前の背景の“<attachment>”値〛 〚一番手前の背景の“<box>”値〛,
〚手前から2番目の背景の“<bg-image>”値〛 〚手前から2番目の背景の“<bg-position>”値〛/〚手前から2番目の背景の“<bg-size>”値〛 〚手前から2番目の背景の“<repeat-style>”値〛 〚手前から2番目の背景の“<attachment>”値〛 〚手前から2番目の背景の“<box>”値〛,
〚手前から3番目の背景の“<bg-image>”値〛 〚手前から3番目の背景の“<bg-position>”値〛/〚手前から3番目の背景の“<bg-size>”値〛 〚手前から3番目の背景の“<repeat-style>”値〛 〚手前から3番目の背景の“<attachment>”値〛 〚手前から3番目の背景の“<box>”値〛,
...,
〚“<background-color>”値〛 〚一番奥の背景の“<bg-image>”値〛 〚一番奥の背景の“<bg-position>”値〛/〚一番奥の背景の“<bg-size>”値〛 〚一番奥の背景の“<repeat-style>”値〛 〚一番奥の背景の“<attachment>”値〛 〚一番奥の背景の“<box>”値〛;

使用例

背景を指定する

div {
10px dotted rgb(0,0,0);
padding: 10px;
background: rgb(204,153,204) url(background_sample.png) repeat-y left scroll content-box;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

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

div {
10px dotted rgb(0,0,0);
padding: 10px;
background: url(background_sample.png) no-repeat left/50px padding-box,url(background_sample2.png) repeat-y center border-box,rgb(204,153,204) url(background_sample3.png) repeat-x center fixed content-box;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク