CSS背景プロパティ一覧
background-attachment
- 説明：背景イメージを固定するか、ページの他の部分と一緒にスクロールさせるか。
- 値。
- scroll:default;ページの残りの部分がスクロールすると背景イメージも移動します。
- fixed:ページの残りの部分がスクロールしても背景イメージは動きません。
- inherit:background-attachment属性が親要素から継承されるように指定します。
- コード
- 効果
背景色
- 説明：要素の背景色を設定します。
- 値。
- color_name: 値が色の名前である背景色を指定します。
- hex_number: 16進数値の背景色を指定します。
- rgb_number：rgbコードの背景色を指定します。
- transparent デフォルト。背景色は透過です。
- inherit background-color属性が親要素から継承されることを指定します。
background-image
- 説明：背景としてイメージを設定します。
- 値。
- url('URL'): イメージへのパス。
- none:default。背景イメージは表示されません。
- inherit:background-image属性が親要素から継承されることを指定します。
background-position
- 説明：背景イメージの開始位置を設定します。
- 値
- 位置の説明:top/right/bottom/left
- :50%/50%
- xpos ypos: /縦位置
background-repeat
- 説明：背景イメージを繰り返し表示するかどうかを設定します。
- 値。
- repeat:default;背景イメージを縦横に繰り返します。
- repeat-x: 背景イメージを水平方向に繰り返します。
- repeat-y: 背景イメージを縦方向に繰り返します。
- no-repeat:背景イメージを一度だけ表示します。
- inherit:background-repeatプロパティが親要素から継承されるように指定します。
background-clip
- 注意：この属性は、一般的にbackground-colorを制御するために使用されます background-imageは良くありません。
- 説明：背景の描画領域を指定します。
- の値を取ります。
- :border-box
- padding-box:背景は内側の余白ボックスに切り取られます。
- content-box:背景はコンテンツボックスに切り取られます。
- :border-box
- 効果
- 効果
- コード:パディングボックス
- 効果
- :border-box
- 効果
background-origin
- 注：この属性は、一般的に背景イメージを制御するために使用されます。
- 説明：背景イメージの配置範囲を指定します。
- 値。
- border-box:背景イメージをborder-boxに相対的に配置します。
- :padding-box
- content-box:背景イメージをコンテンツボックスに相対的に配置します。
- コード:コンテンツボックス
- 効果
- コード:パディングボックス
- 効果
- :border-box
- 効果
background-size
- 説明：背景イメージのサイズを指定します。
- 値。
- length:背景イメージの高さと幅を設定します; 最初の値は幅を設定し、2番目の値は高さを設定します; 値が1つだけ設定された場合、2番目の値は "auto "に設定されます。
- percentage:背景イメージの幅と高さを、親要素に対するパーセンテージで設定します; 最初の値で幅を、2番目の値で高さを設定します; 値が1つしか設定されない場合、2番目の値は "auto "に設定されます。
- cover:背景イメージを十分な大きさに拡大し、背景イメージが背景領域を完全に覆うようにします。
- contain:イメージイメージを最大サイズに拡大し、その幅と高さがコンテンツ領域に完全に収まるようにします。
