backgroundをショートハンドで指定する

HTML/CSS

関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。

今回は背景に関するbackgroudのショートハンド指定について。
注意するのはサイズ指定と-origin -clipの順番だけなので、特に難しくもありません。

スポンサーリンク

ショートハンドbackground

ショートハンドでは

  • background-color (色)
  • background-image(画像やグラデーション)
  • background-repeat (繰り返し)
  • background-position(画像の表示位置)
  • background-size (サイズ)
  • background-origin (画像の基準位置)
  • background-clip (表示領域)
  • background-attachment (画像の固定)

を一括指定することが出来ます。

backgroundショートハンドでの厳守ルール

基本的に、空白区切りで指定していけば良いのですが、

background-sizeを指定するときは必ず -position/-size とすること。(-sizeのみの指定はエラー)

-origin -clipの指定は最初に指定した値は-origin。 後に指定した値が-clip

という2つのルールがあります。

-sizeと-positionについては、どちらも空白区切りの値で指定できる(0% 50% やtop leftなど)ので、ルールが無いと意味が分からなくなる為。

-originと-clipは同じ値を使って指定するから。

この2点さえ守っていれば後は順不同に空白区切りで書けばOKです。
個別指定のときと同じく、省略したプロパティについては初期値が適用されます。

(例)
下のサンプル{
  background: url(xxx.jpg) coral no-repeat center/40% 80%
}
 

色・画像・繰り返し・基準/サイズで指定しています。
背景画像にグラデーションをかける」でも書きましたが、画像は色より上に重なりますので覚えておきましょう。

background一括指定のその他注意点

有名なバグとして、background-attachement: fixed と background-size: cover を併記すると、主にiOSで表示がおかしくなります。

個人的な注意点としては、

「transitionやanimationでbackground-sizeを変えるときは個別指定する」

ホバーボタンの作り方」で少しふれていますが、background-sizeの値を変更するアニメーションを使うときは個別に指定しておかないと何故かエラーになる場合があります。

あと、一括指定だけの話ではないですが、background-attachmentにfixedが指定されているとき、background-originは無視されます。固定するのに基準位置つけても仕方ないですしね。

ミフネWEB
タイトルとURLをコピーしました