Eyecatch html css

HTML,CSS

【CSS】backgroundプロパティのまとめ

2015/06/04

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。

backgroundプロパティ

backgroundプロパティ概要

背景関連のスタイルを指定するプロパティ

種類

(1) background-color
背景色を指定
(2) background-image
背景画像を指定
(3) background-repeat
背景画像の並び方を指定
(4) background-position
背景画像の表示位置を指定
(5) background-attachment
背景画像の固定を指定
  • それぞれの値は、半角スペースで区切って記述
  • 記述する順序は自由で、必要のない指定は省略することも可能

(1) background-color

transparent
透明 (初期値)
色のコードまたはネーム

(2) background-image

none
画像なし (初期値)
rl(URL or PATH)
表示する画像のURI

(3) background-repeat

repeat
敷き詰める (初期値)
repeat-x
水平方向に並べる
repeat-y
垂直方向に並べる
no-repeat
1つだけ表示する

(4) background-position

長さ、%
数値+単位(px 等)またはパーセント (初期値は 0% 0%)
キーワード指定(水平方向)
left
center
中央
right
キーワード指定(垂直方向)
top
center
中央
bottom

(5) background-attachment

scroll
固定しない (初期値)
fixed
固定する

backgroudの一括指定

使用例(サンプルコード)

指定内容

記述#ffffccuri(../img/background.png)repeat-yright topfixed;
内訳背景色背景画像並び方表示位置固定表示

bagkground-sizeプロパティ

bagkground-sizeプロパティ概要

背景画像のサイズを指定する際に使用

auto
自動的に算出される(初期値)
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
背景画像の幅・高さを指定する
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する

使用例(サンプルコード)

-HTML,CSS
-, , , , , , , ,