京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

バックグラウンドプロパティについて-後編-

2015年11月11日工藤
Pocket

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

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

今日は先週に引き続きバックグラウンドプロパディについて解説していきたいと思います。

background-origin

背景画像の開始位置基準値を指定します。初期値はpadding-boxです。

青い部分がコンテンツ、緑の部分がパディング、黄色の部分がボーダー。赤い部分がマージンです。
バックグラウンドは、パディング領域を表示させますがマージン領域には、バックグラウンドが表示されません。

こちらのプロパティでは、基準位置を指定します。

border-box borderの境界の外側まで引き伸ばされます。
padding-box borderの内側からに背景を描写します。
content-box 背景はコンテンツの内部に描写されます。
div{
  width: 300px;
  height: 300px;
  margin: 10px;
  padding: 40px;
  box-sizing: border-box;
  border: 40px dashed #000;
}

padding-box

bg7
パディング領域を基準として表示させます。

border-box

bg8
ボーダー領域を基準として表示させます。

content-box

bg6
コンテント領域を基準として表示させます。

background-clip

背景画像の描写領域を指定します。初期値はborder-boxです。
このプロパティでは、適用範囲を操作します。

border-box 背景の描写をborderの外側まで描写します。
padding-box borderの内側からに背景を描写します。
content-box 背景はコンテンツの内部に描写されます。

border-box

bg11
背景画像をボーダー領域まで表示させます。

padding-box

bg10
背景画像をパディング領域まで表示させます。ボーダー領域は表示させません。

content-box

bg12
背景画像をコンテンツ領域まで表示させます。パディング領域には表示させません。

background-size

背景画像のサイズを指定します。初期値はautoです。
このプロパティは、スマートフォンなどのレスポンシブでよく使われるプロパティで、背景画像をコンテンツ領域いっぱいに表示させます。

auto 背景画像が縦横比が維持された状態で描写します。
cover 背景画像が領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さく描写します。
contain 背景画像が領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さく描写します。
数値 数値を指定すると背景画像の大きさを指定します

auto

bg12

cover

bg13

contain

bg11

50px

bg14

background-attachment

画面をスクロールした際に、背景画像を固定させるかスクロールさせるかを指定します。
初期値はscrollです。

fixed 背景画像を固定します。画面をスクロールしても要素内の背景画像は固定され、動きません。
scroll スクロールにそって、背景画像をスクロールさせます。
local 背景画像をスクロールさせますが、領域内の場合は固定させます。

fixedを使うことで、画面はスクロールしているが背景画像は固定され、パララックスのような描写が出来ます。

scroll

b0ad0f7b4fa222fdeb3485fe47df4886

fixed

764e21ede69fdb3944f151624c2fec16

local

1acb0f469c904543d4962af7e6dd1d92

終わりに

以上、バックグラウンドでした。
背景画像のサイズが足りなくて、隙間が生じる…というときには、background-size:cover を試してみることをおすすめします。

こちらの例では、表現がわかりづらかったと思いますが、background-attachmentのfixed は、使ってみると少しリッチな感じに作れますので、ぜひ一度試してみてください。

また、background-imageは、2種類以上の画像も貼り付けることが可能です。表現方法が広がりますね。


background-image{
  url(../image/bg-01.png),url(../image/bg-02.png);
}
background-repeat{
  no-repeat,no-repeat
}
background-position{
  left top, right top
}

repeatなども順番に指定されます。
また、重なる場合は前に記述する画像が前面に表示されます。

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら