CSSの背景（バックグラウンド）

CSSの背景特性はHTML要素の背景を定義するために使用されます。

CSSプロパティは、背景エフェクトを定義します。

• 背景色
• 背景画像
• 背景リピート
• 背景アタッチメント
• background-position

背景色

背景色プロパティは、要素の背景色を定義します。

ボディセレクタで使用するページの背景色：

CSSは、カラー値は通常、以下のように定義されています。

• 六角 - など： "＃FF0000の」
• RGB - など：「RGB（255,0,0） "
• 色の名前 - など：「赤」

次の例では、H1、pおよびdiv要素は、異なる背景色を持っています：

背景画像

背景画像の属性は、背景画像の要素について説明します。

デフォルトでは、背景画像を繰り返し素子全体のエンティティをカバーするように表示タイルれます。

ページの背景画像の設定例：

ここでは、テキストと背景画像の悪い組合せの一例です。 テキスト貧しい読みやすさ：

背景画像 - 水平または垂直タイル

デフォルトでは、背景画像のプロパティは、ページの水平または垂直方向にタイル張りされています。

いくつかの画像は水平方向および垂直方向にタイル張りのため、以下のように、それは、非常に協調的に見える場合：

水平方向にのみ画像タイル（繰り返す-X）をした場合、ページの背景が良くなります。

背景画像 - セット位置ではなく、タイル

背景画像は、テキストレイアウトに影響を与えませんしましょう

あなたは画像タイルをしたくない場合は、バックグラウンド・リピートプロパティを使用することができます。

テキストが同じ場所に表示され、ページレイアウトをより合理的にするために、我々は、画像の位置を変更することができ、テキストの読み取りを上記の例では、背景画像と影響を与えません。

background-positionプロパティは、ここでは、バックグラウンドで画像を変更するために使用することができます。

背景 - 速記プロパティ

上記の例では、制御するための属性の多くを介してページの背景色を見ることができます。

これらのプロパティのコードを簡素化するために、我々はこれらの属性が同じプロパティに組み合わされて使用することができます。

「背景」の短縮形プロパティの背景色：

速記プロパティを使用する場合は、属性値の順序と::

• 背景色
• 背景画像
• 背景リピート
• 背景アタッチメント
• background-position

すべてのこれらの属性は、ページの実際のニーズに応じて使用することができ、使用する必要はありません。

この例では、前述のCSSを使用し、インスタンスを表示することができます： CSSの例

より多くの例

固定背景画像を設定する方法
この例では、固定された背景画像を設定する方法を示します。 画像は、ページの残りの部分と一緒にスクロールしません。

CSSの背景のプロパティ