背景画像を指定する

background-color ➡ 背景色 【カラーネーム】


background-color: #fafad2; … HEXで指定 #rrggbb
background-color: rgba(250,250,210,.8); … RGBAで指定 rgba(r,g,b,a)
background-color: lightgoldenrodyellow; … カラーネームで指定
background-color: lightgoldenrodyellow;

background-image ➡ 背景画像


background-image: url('/path /to/image/img.png'); … 背景画像の指定
background-image: url('/path /to/image/img.png');

background: linear-gradient ➡ 背景グラデーション

background-repeat ➡ 背景画像の繰り返し


background-repeat: repeat;		/ no-repeat;	… する / しない
background-repeat: repeat-x;	/ repeat-y;		… 横方向にのみ繰り返し / 縦方向にのみ繰り返し
background-repeat: space;		/ 領域の両端に均等に配分される（position値は基本的に無視される）
background-repeat: round;		/ 背景画像1個分の余白ができるまで領域に合わせて縮小伸長する
background-repeat: no-repeat;

background-position ➡ 背景の位置


background-position: top;		/ left / right / bottom / center … 領域の天 / 左 / 右 / 底 / 中央 に表示
background-position: right top;					… 領域の右、底の位置に表示
background-position: 30% 10%;					… 領域の左辺から30%、天から10% の位置に表示
background-position: right 3rem bottom 1rem;	… 領域の右辺から3rem、底辺から1rem の位置に表示
background-position: 30% 10%;
background-position: right 3rem bottom 1rem;

background-size ➡ 背景のサイズ


background-size: cover;			… 縦横比を変えずに領域の横いっぱいに表示。高さはautoになる。
background-size: contain;		… 縦横比を変えずに領域に背景画像を全部表示。（領域に余白ができることがある）
background-size: 100px;			… 画像の横幅のサイズを指定。
background-size: 50%;			… 画像の横幅のサイズが領域に占める割合を指定。（画像のサイズの50%ではない）
background-size: 50% 20%;		… 横幅、高さの順でサイズが領域に占める割合を指定。（auto以外画像の縦横比は保持されない）
background-position: center;
background-size: 50% 20%;

background-origin ➡ 背景の基準となる点

※background-attachment が fixed のときは効かない。


background-origin: border-box;			… 領域のborder boxの左上を基準にして背景画像を表示する
background-origin: padding-box;			… 領域の中のpadding boxの左上を基準にして背景画像を表示する
background-origin: content-box;			… 領域の中のcontent boxの左上を基準にして背景画像を表示する
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-clip ➡ 別項【背景画像の適用範囲を指定する】

※background-attachment が fixed のときは効かない。


background-clip: border-box;			… 領域のborder box 内に背景画像を表示する
background-clip: padding-box;			… 領域の中のpadding box 内に背景画像を表示する
background-clip: content-box;			… 領域の中のcontent box 内に背景画像を表示する
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

origin と clipの違い

  • origin は背景の適用範囲の基準点を指定（どこから表示が始まるか）
  • clip は背景の適用範囲を指定（どこからどこまで表示するか）

background-attachment ➡ 背景の固定


background-attachment: scroll; //基点は領域の左上。内容と連動してスクロールしない。
background-attachment: fixed;  //基点はビューポート（普通はブラウザと同義）の左上 ※iOSが対象に含まれる時はpositionを使う
background-attachment: local;  //基点は領域の左上。内容と連動してスクロールする。

background-attachment: scroll;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!

background-attachment: fixed;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!

background-attachment: local;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!

background ➡ ショートハンド


background-color: #567895;						➡ 背景色
background-image: url('/path /to/image.png');		➡ 背景画像
background-repeat: round;							➡ 背景画像の繰り返し方
background-position: 50%;							➡ 背景の位置
background-size: 200px;								➡ 背景のサイズ
background-origin: ;								➡ 背景の基準となる点
background-clip: border-box;						➡ 別項【背景画像の適用範囲を指定する】
background-attachment: fixed;						➡ 背景の固定

		↓ ↓ ↓

//ショートハンド
background: #567895 url('/path /to/image.png') round 50%/200px border-box fixed;

	■ position/size			… この順でスラッシュを挟んで指定。※sizeのみの指定はできない
	■ origin と clipの指定	… 最初に指定した値が origin、後に指定した値が clip となる
		※background-attachment が fixed のときは効かない。
 

Sample


.bgImg1 {background: url('/path /to/image.png') 0px/150px round;}
			

.bgImg2 {
	background-image: url('/path/to/image/img.png');
	background-repeat: no-repeat;
	background-size: cover;
	}
			

.bgImg3 {
	background-color: #567895;
	background-image: url('/path/to/image/img.png');
	background-repeat: no-repeat;
	background-size: 50%;
	}
			

.bgImg4 {
	background-image: url('/path/to/image/img.png');
	background-repeat: no-repeat;
	background-position: 50% 20%;
	background-size: 80%;
	}
			

.bgImg5 { background: #fafad2 url('/path/to/image/bg.png') repeat;}
			

.bgImg6 {
	background: url('/path/to/image/bg.png') repeat-y 10px/ 50px, linear-gradient(to right,#fafad2 0%, #fff 30%);
	}

TOP