backgroundプロパティの一括指定で注意すべきたった2つのこと

はじめに

CSSのショートハンドって覚えてしまえばラクですけど、覚えるまでが面倒だったり、そもそも覚える気にならなかったりしますよね。
僕は数年CSSを書いてますけどいまだにこれです。そもそも覚える気にならないタイプです。拒否反応が出ます笑

今回紹介するbackgroundのショートハンドもその一つで、よく使うプロパティ以外は個別指定していました。
ただ、ある書籍を読んでいるときに、「あ、ここだけ気を付ければいいんや」といった発見があったので個人的にメモってました。
がしかし、せっかくメモったことですしQiitaにも投稿してみようと思い立った次第でございます。

backgroundのショートハンドについて

• background-image
• background-repeat
• background-color
• background-position
• background-size
• background-origin
• background-clip
• background-attachment

上記の値を、一括で指定することができるプロパティです。

[参考サイト]
background - CSS: カスケーディングスタイルシート | MDN

background-positionプロパティの仕様

それぞれのプロパティの仕様に関してはお調べいただきたいのですが、
今回の肝となるbackground-positionプロパティの仕様については、押さえておくべきポイントはお伝えしておこうと思います。
そのほうが、これからの説明もわかりやすくなると思うからです。
僕が押さえておくべきだと思ったポイントは、以下の4点です。

• 一つ目の値は水平方向の値、二つ目の値は垂直方向の値として処理されます。

• 指定する値の形式には大きく分けて2種類があります。①数値＋単位、②キーワードの2種類です。キーワードとはtop、right、bottom、left、centerのことです。

background-position.css

/* 1（数値＋単位）の場合 */
background-position: 50px 5%;

/* 2（キーワード）の場合 */
background-position: left bottom;

• 値を一つしか指定しない場合、その値は水平方向の値として処理されます。垂直方向の値には自動的にcenterが指定されます。
• 水平方向の値と垂直方向の値が逆になっている場合、自動的に修正して処理してくれますが、自動処理が働くのは二つの値がキーワードの場合のみです。両方、あるいはどちらか一方の値が数値+単位の場合は自動処理が働きません。

background-position.css

bacakground-position: top left;

上記の場合、自動的に水平方向の値にleft、垂直方向の値にtopが指定されるよう、自動処理が働きます。leftがrightでも、topがbottomでもです。
水平方向の値にtopが指定されているのも、垂直方向の値にleftが指定されているのもおかしいですもんね！
ちなみにcenterは両方で使えるキーワードなので、そのまま処理されます。

[参考サイト]
背景画像の位置の設定(background-position) - 背景プロパティ - スタイルシート入門
background-position - CSS: カスケーディングスタイルシート | MDN

注意すべきたった2つのこと

さて、本題の注意すべきたった2つのポイントについてですが、結論から先にお伝えします。

1. background-position / background-sizeの順に指定する
2. background-sizeの値を指定する場合は、background-positionの値も併せて指定する

この2つのポイントさえ押さえておけば、プロパティの指定順は気にしなくていいし、好きなプロパティだけ選んで指定しても大丈夫です。
1.の表記でもあるように、background-positionとbackground-sizeの間はスラッシュで区切ります。
あとのプロパティは全て半角スペースで区切ります。

1と2の条件さえ守れば、スペースで区切って好きに指定していいんです！簡単！！

具体例

意図通りに表示される場合とそうでない場合の例を見てみましょう。

■指定通りに表示される

background.css

/*background-positionとbackground-sizeの関係性にさえ準じていれば、記述順は任意で問題ないです。*/
background: url(../img/bg.png)  center top / cover no-repeat rgb(176, 224, 230) fixed content-box;
background: center 20px / cover url(../img/bg.png) no-repeat #dddddd;
background: url(../img/bg.png) no-repeat rgb(176, 224, 230) 50% top / cover;

/*background-positionの値のみを指定した場合、background-sizeには初期値（auto）が自動指定される。下記ふたつの表示は同じになります。*/
background: url(../img/bg.png) repeat-y rgb(176, 224, 230) center top;
background: url(../img/bg.png) repeat-y rgb(176, 224, 230) center top / auto;

「途中でスラッシュが入ってたらわかりにくいわー」という方は、最初か最後に書いちゃいましょう！

background.css

background: url(../img/bg.jpg) no-repeat #dddddd center top / cover;
background: center top / cover url(../img/bg.jpg) no-repeat #dddddd;

個人的には、最後に記述するほうがスッキリしてると感じます。

■背景画像は表示されるが、指定値通りに表示されない ('_')

background.css

/*background-sizeの値のみを数値で指定すると、background-positionの値として処理される。*/
background: url(../img/bg.png) repeat-y #dddddd 80%;

/*background-positionの値を一つしか指定しない場合、垂直方向にあたる値は50%（center）が自動指定される。下記ふたつの表示は同じになります。*/
background: url(../img/bg.png) repeat #dddddd left/ 100px;
background: url(../img/bg.png) repeat #dddddd left center/ 100px;

■背景画像そのものが表示されない ('_')

background.css

/*background-size値を数値以外の値で指定し、background-positionの値を指定しなければエラーになる。*/
background: url(../img/bg.png) repeat-y #dddddd 100% cover;

/*positionとsizeの値が逆になっているとエラーになる。*/
background: url(../img/bg.png) repeat-y #dddddd 100% center top;

/*positionとsizeの値が逆になっている。スラッシュを入れてもエラーになる。*/
background: url(../img/bg.png) repeat-y #dddddd 100% / center top;

/*positionとsizeの間にほかのプロパティの値が挿入されているとエラーになる。*/
background: url(../img/bg.png) no-repeat #dddddd  center top fixed 100%;

番外編

backgroundプロパティの一括指定で、複数の画像を指定することもできます。
ただし、複数画像を指定して、尚且つ背景色も指定する際には注意が必要です。
背景色の指定は、最後の画像の指定場所に記述しなければなりません。

extra.css

/* 不正解 */
background: url(../img/bg.png) no-repeat #000 fixed 50% top / 50px,
            url(../img/bg.png) no-repeat fixed left bottom / 50px;

/* 正解（指定画像が2つでも100個でも、最後の画像指定範囲に背景色は指定しなければエラーになります。） */
background: url(../img/bg.png) no-repeat fixed 50% top / 50px,
            url(../img/bg.png) no-repeat #000 fixed left bottom / 50px;

まとめ

以上です！
background-positionの仕様がちょっとややこしいですけど、そこさえ押さえることができれば、

1. background-position / background-sizeの順に指定する
2. background-sizeの値を指定する場合は、background-positionの値も併せて指定する

の2点さえ気をつければ複雑ではないので、非常に使いやすいプロパティだと思います。

僕の調査不足もあるかもしれませんので、もし間違えている説明があったり、不足している部分などがございましたら、優しく教えていただけますと幸いです。

ご覧いただきありがとうございました！