【CSS】backgroundプロパティのまとめ
2017/12/21
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の一括指定
使用例(サンプルコード)
[css]
div.sample1 {
background: #ffffcc url(../img/background.png) repeat-y right top fixed;
}
[/css]
指定内容
| 記述 | #ffffcc | uri(../img/background.png) | repeat-y | right top | fixed | ; |
| 内訳 | 背景色 | 背景画像 | 並び方 | 表示位置 | 固定表示 |
|---|
bagkground-sizeプロパティ
bagkground-sizeプロパティ概要
背景画像のサイズを指定する際に使用
値
- auto
- 自動的に算出される（初期値）
- contain
- 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
- cover
- 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
- 長さ
- 背景画像の幅・高さを指定する
- パーセンテージ
- 背景領域に対する背景画像の幅・高さのパーセンテージを指定する
使用例(サンプルコード)
[css]
p.sample1 {
width: 400px;
height:80px;
padding:15px;
border: dashed 20px #000000;
background-image: url("./img/bg_flower.png");
background-size: contain;
}
[/css]