Background(背景)

[CSS] Background (一括指定)

この記事は最終更新から2年以上経過しており、内容が古い可能性があります

CSS の backgroundは、 背景(background)に関するショートハンド ( いつくかの項目をまとめて、或は、単体で指定できる ) プロパティです。

同じテーマの記事
このページの目次
    1. 背景画像のショートハンド(例)
    2. 背景画像の複数指定(例)

一括指定可能な background プロパティ(値)

以下のプロパティをまとめて指定できます。

プロパティ 適用 値(例)
background-color 背景色 red, #f00, rgba(0,0,0,.5), transparent
background-image 背景画像 url(), gradient()各種
background-repeat 画像の繰り返し repeat, no-repeat, space
background-position 画像の位置 top, left, center, %, px
background-size 画像サイズ contain, cover, %, px
background-attachment 画像のスクロール scroll, fixed, local
background-origin 画像配置の開始点 border-box, padding-box, content-box
background-clip 画像の表示領域 border-box, padding-box, content-box, text

※ 各値は省略可能。(省略した値は初期値となる)

※ background-position / background-size だけは、’ / (スラッシュ)’ を挟む

※ 値に順序の規定はないが、background-origin,background-clip は origin,clip の順で最後に置く( 1個のみ指定した場合は両方に適用 )

背景画像のショートハンド(例)

各プロパティの値のみをスペースで区切って指定します。

background: #fff url(img/tes.png) no-repeat 50% 50% / cover fixed border-box;

背景画像の複数指定(例)

backgroundは、
個々の背景レイヤー(ショートハンド)をカンマ ‘ , ‘ で繋ぐことで、複数指定する事ができます。

左(最初に書かれたもの)が一番上、右に行くほど下になります。

background: 
  url(img/tes.png) no-repeat 50% 50% / cover fixed, 
  #000 url(img/bg.png) repeat border-box;

※背景色は最後(一番右)のレイヤーのみ指定可能です。

同じテーマの記事