CSS3: background ショートハンド(複数指定) background-size の記述方法

久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。
今回は background ショートハンドへ background-size を記述する方法をメモしておきます。

目次

  • background ショートハンド(複数指定) background-size の記述方法
  • まとめ

background ショートハンド(複数指定) background-size の記述方法

以下、background でよく行うであろうプロパティを個別に記述した場合、ショートハンドで記述した場合のサンプルをそれぞれ用意しました。

background 個別指定

body {
    background-image: url(path);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #CCCCCC;
}

background ショートハンド(複数指定)

ショートハンドでは /cover とすることで background-size: cover を指定することができます。

body {
    background: #CCCCCC url(path) center center /cover no-repeat fixed;
}

まとめ

CSS の background ショートハンドは CSS2 では多様していましたが、CSS3 からは設定項目が大幅に増えたため、コードの見通しが悪くなってしまいがちです。

慣れないうちは、多少面倒でも個別にプロパティを指定し記述する方法が、混乱も少なくいいのかもしれませんね。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents