Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

今日はバックグラウンドプロパディについて、2回に渡って解説していきます。

background

背景をまとめて指定するCSSプロパティです。
backgroundプロパティには下記の種類があります。

background-color

背景の色を指定します。初期値はtransparent。透明です。
白の背景で陥りやすいミスが、コレです。白背景ならbackground-color: #fff;を指定しておかないと、予期せぬ背景色が紛れ込む可能性があります。

.red{
  background-color: red;
}
.green{
  background-color: #0f0;
}
.rgba{
  background-color: rgba(0,0,255,0.5);
}
.hsla{
  background-color: hsla(100, 10%, 10%, 0.8);
}

background-image

背景画像を指定します。初期値はnoneです。
よく陥りやすいミスとして、background-imageで画像を貼り付ける時、backgroundに高さの要素を持たないため途中で切れたりします。

background-repeat

背景画像の繰り返しを指定します。
値は以下の通りです。

div{
  width: 500px;
  height: 500px;
  margin: 10px;
}
.space{
  background-image: url(http://placehold.jp/150x150.png);
  background-repeat: space;
}

※500pxの領域に対して、150pxの背景画像が3回入るので3回繰り返され、その隙間が50pxあるため、25pxずつの隙間が発生します。

div{
  width: 250px;
  height: 200px;
  margin: 10px;
}
.space{
  background-image: url(http://placehold.jp/150x150.png);
  background-repeat: space;
}

※領域に一回しか描写できないため、一回だけしか描写しません。

div{
  width: 300px;
  height: 50px;
  margin: 10px;
}
.a{
  background-image: url(http://placehold.jp/150x150.png);
  background-repeat: round;
}

※領域に隙間なく表示させるため、画像を引き伸ばして描写します。

background-position

背景画像の位置を指定します。
数値を2回指定した場合、横 縦に反映されます。

background-position: 10% 30%;
background-position: center bottom;
background-position: center top;

終わりに

以上が、よく使われる背景の描写です。
imageとcolorは同時に使う事もできます。

ショートハンドを利用して、よくこのように書かれます。

  background: url(http://placehold.jp/150x150.png) no-repeat center top #0cd;

背景画像を使うのは、WEBサイトを華やかにするためには必須とも言えます。
パターンの背景画像も、描写領域をそのまま切り取るのではなくパターンが続く場所で切り取って使えば背景画像に容量も使わなくて済むので覚えておくと、サイトの表示を早く出来ます。

長くなってしまったのでbackground-sizeやattachmentなどは次週紹介していきます。

Tweet

Pocket

Related posts:

フロートを解除して通常フローに戻すクリアプロパティー いろいろと便利なoverflow:hidden;についてのあれこれ スタイルの記述と優先順位について before、afterを使ってコーディングの幅を広げよう