CSS 背景 プロパティ_html/css_WEB-ITnose

CSS リファレンス マニュアル

例

1 つのステートメントですべての背景プロパティを設定する方法:

body  {   background: #00FF00 url(bgimage.gif) no-repeat fixed top;  }

自分で試してみる

ブラウザ サポート

IE Firefox Chrome Safari Opera すべてのブラウザは背景属性をサポートしています。

注: IE8 以前のブラウザは、1 つの要素に対する複数の背景画像をサポートしていません。

注: IE7 以前のブラウザは「継承」をサポートしていません。 IE8 には !DOCTYPE が必要です。 IE9では「継承」がサポートされています。

定義と使用法

Background 省略表現プロパティは、1 つのステートメントですべての背景プロパティを設定します。

次のプロパティを設定できます:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background - 画像

if いずれかの値が設定されていなくても問題ありません。たとえば、background:#ff0000 url('smiley.gif'); などでも問題ありません。

この属性は古いブラウザでより適切にサポートされ、入力する必要がある文字が少なくなるため、個々の属性を個別に使用するのではなく、この属性を使用することを一般的にお勧めします。

デフォルト: 指定なし 継承: no バージョン: CSS1 + CSS3 JavaScript 構文: object.style.background="white url(paper.gif)や「 可能な値

値 説明 CSS background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-imageinherit

使用する背景色を指定します。	1
背景画像の位置を指定します。	1
背景画像のサイズを指定します。	3
背景画像を繰り返す方法を指定します。	1
背景画像の配置範囲を指定します。	3
背景の描画領域を指定します。	3
背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します。	1
使用する背景画像を指定します。	1
背景属性の設定を親要素から継承することを指定します。	1

自分で試してみる - 例

1 つの宣言内のすべての背景プロパティ この例では、短縮属性を使用して 1 つの宣言ですべての背景プロパティを設定する方法を示します。

関連ページ

CSS チュートリアル: CSS 背景

CSS3 チュートリアル: CSS3 背景

HTML DOM リファレンス: 背景属性