CSS3

：

プロパティ

：

background

　 編集：2022.07.14 by T.A.

→● mdn

背景の各種設定： 略式プロパティ。

名前 background
値 [<bg-layer># ,]? <final-bg-layer>
初期値 個々のプロパティを見よ
対象 全ての要素
継承 されない
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
アニメーション型 個々のプロパティを見よ
<bg-layer>
＝background-imageの値
|| background-positionの値 [ / background-sizeの値 ]?
|| background-repeatの値
|| background-attachmentの値
|| background-clipの値
|| background-originの値
<final-bg-layer>
＝background-colorの値
|| background-positionの値 [ / background-sizeの値 ]?
|| background-repeatの値
|| background-attachmentの値
|| background-clipの値
|| background-originの値

注記： 背景色（ background-colorの値）は、<final-bg-layer>（最後の背景層）においてのみ許可される。 

<DIV style="border:1px solid red; width:100px; height:100px;
 background:url(Com/BG1.jpg) no-repeat,
  url(Com/BG2.jpg) no-repeat 50% 10px #00f2;
">あ
</DIV>

¶省く 

body { background: red }

この規則では次と等価になる： 

body {
  background-color:      red;
  background-position:   0% 0%;
  background-size:       auto;
  background-repeat:     repeat;
  background-clip:       border-box;
  background-origin:     padding-box;
  background-attachment: scroll;
  background-image:      none;
}

p {
  background: url("chess.png") 40% / 10em gray round fixed border-box;
}

この規則では次と等価になる： 

p {
  background-color:      gray;
  background-position:   40% 50%;
  background-size:       10em auto;
  background-repeat:     round;
  background-clip:       border-box;
  background-origin:     border-box;
  background-attachment: fixed;
  background-image:      url(chess.png);
}
カンマ区切りによる複数の層値からなる宣言： 
background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

上の宣言は、次と等価になる： 

background-image:      url(a.png),   url(b.png),   url(c.png);
background-position:   top left,     center,       top left;
background-repeat:     no-repeat,    no-repeat,    repeat;
background-clip:       border-box,   border-box,   border-box;
background-origin:     padding-box,  padding-box,  padding-box;
background-size:       auto auto,    100% 100%,    auto auto;
background-attachment: scroll,       scroll,       scroll;
background-color:      white;
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：