#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background css

Background CSS

背景関連のプロパティ

backgroundプロパティは、背景色や背景画像の背景関連を指定するCSSプロパティです。
指定できる種類は、背景の色、背景画像、背景画像の固定・移動、背景画像の位置、リピート等が有ります。

プロパティのブラウザ別対応

IE/Edge Chrome Firefox Opera Safari
<color> 背景色を指定 3.0 1.0 1.0 3.5 1.0
<image> 背景画像を指定 3.0 1.0 1.0 3.5 1.0
<attachment> 背景画像を固定・スクロールを指定 4.0 1.0 1.0 3.5 1.0
<position> 背景画像の表示位置を指定 4.0 1.0 1.0 3.5 1.0
<repeat> 背景画像のリピートの仕方を指定 4.0 1.0 1.0 3.5 1.0
<size> 背景画像の表示サイズを指定 9.0 21 18 21 5.1
<origin> 背景画像を表示する基準位置を指定 9.0 31 22 21 5.1
<clip> の適用範囲を指定 9.0 31 22 21 5.1
複数背景 9.0 1.0 3.6 10.5 1.3
   background-color: 色; /* colorcode,colorname */
   background-image: 画像; /* url() 括弧内に背景画像のURLを指定,none */
   background-attachment: スクロール; /* scroll,fixed,local */
   background-position: 位置; /* top,right,bottom,left,%,px等の数値 */
   background-repeat: 繰り返し; /* repeat,no-repeat,repeat-x,repeat-y,space,round */
   background-size: 表示サイズ; /* cover,contain,auto,%,px等の数値 */
   background-origin: 基準位置; /* border-box,padding-box,content-box */
   background-clip: 表示領域; /* border-box,padding-box,content-box */

背景に関するものをまとめて指定

値をまとめて指定する事が出来ます。
複数の値を指定する場合には、半角スペースを空けて記述します。

body {
   background: url(img/sample.png) #6699cc repeat-x fixed;
}

上記の例は、bodyに 背景画像・背景色・背景リピート・背景画像固定 を指定しています。
また、必要の無いものは省略でき、並べる順番にも決まりは有りません。

背景のプロパティを個別に指定

body {
   background-image: url(img/sample.png);
   background-color: #6699cc;
   background-repeat: repeat-x;
   background-attachment: fixed;
}

上記と同様のプロパティを個別に指定しています。表示する結果は同じになります。