HTML/CSS

【CSS】backgroundの書き方まとめ!位置や透過など複数指定する方法

「background」って、確実にコーディングで使うプロパティだと思っていまして、理解は必須だと感じました。

簡単に思えて、以外にも手が止まってしまったりするんですよね。。

 

 

この記事では、CSSで背景を指定するプロパティ「background」について解説していきます。

 

 当記事の内容

  • backgroundの種類について
  • まとめて複数指定する方法

 

backgroundの種類について

backgroundは、位置や色、表示方法などを一括で指定できるプロパティです。まとめて指定できるプロパティとしては、以下のものがあります。

 

 

たくさんありますね・・。というか使ったことのないものまであります。

 

ですが、backgroundはよく使うので、まとめてかけるものであれば短縮して書けた方がコード量も減りますし、CSSもスッキリします。

 

今後のためにも覚えておきましょう!

 

まとめて複数指定する方法

 

まずはサンプルとして、それぞれのプロパティを個別に指定した場合です。

 

See the Pen
background full
by kei (@kei_01011)
on CodePen.

※すみません、ちょっと見にくいのでこちらから全画面でご覧ください。

 

 

内容としては、以下のプロパティを背景に指定しています。

background-image:
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat:no-repeat;

背景画像を横幅いっぱいにしつつ、中央に固定しつつ、繰り返ししない
という指定ですね。

正直言って、かなり長ったるいし、「background」という単語が何度も出てきているのが気になります。

 

 

そこで、一括指定したものがこちらです。

See the Pen
background
by kei (@kei_01011)
on CodePen.

※すみません、ちょっと見にくいのでこちらから全画面でご覧ください。

 

これだけの記述で、上のものと同じ指定をすることができます。こっちの方がスッキリしていいですね!

 

background: url(“ ") center / cover fixed no-repeat;

 

特に順番は決まっていなくて、「半角スペース」で区切って指定をすればオッケーですが、一つだけポイントが。

 

→ 「background-position」と「background-size」はスラッシュ(/)で続けて指定する

 

background: url(“ ") center / cover fixed no-repeat;

 

上のコードで言うところの、center / coverの部分ですね。

つまり、「background-positionの値」 /「background-sizeの値」は固定になりますので、注意が必要です。

 

まとめ:背景画像をマスターせよ!

 

 まとめ

  1. backgroundの値は「半角スペース」で区切って指定
  2. position / sizeはスラッシュ「/」で区切る

この2点を理解しておけばとりあえずオッケーだと思います。

 

背景画像はLPとかで使いまくる印象ですし、基本が理解できていれば応用もできるようになるはず。簡単なところで手が止まらないように、とにかくコードを書きまくってなれることが大事ですね。