cssプロパティbackgroundの詳しい説明(html,css入門)

こんにちは tanaka です。

今回は、
cssプロパティ「background」の説明です。

「background」は、
背景に色、画像を入れるプロパティです。

「background」の種類は、
8種類 + 一括指定があります。

(1)background-color    = 色
(2)background-image   = 画像
(3)background-clip    = ボックスモデルの使用範囲
(4)background-origin   = 背景画像の開始位置
(5)background-size    = 大きさを変える
(6)background-repeat   = 繰り返し
(7)background-position  = 置き場所
(8)background-attachment = スクロールへの対応

(9)background = 一括設定

(注意)
「(9)background=一括設定」の説明は省きます。

<「image」「color」は同時に使える>

「background-image」
「background-color」
は、同時に使うことができます。

同時に使った場合、
 background-image = 前面
 background-color = 背面
へ入ります。

「画像は前面」「色は背面」と覚えると良いでしょう。

blog-css-background20

<「image」は「origin」で開始位置を変えられる>

「background-image」は、
「background-origin」を使うと開始位置を変えることができます。

画像blog-css-background24

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティbackgroundの説明

backgroundとは

「background」とは、
背景に色、画像を入れるプロパティです。

「background」は、
とても重要なプロパティです。

この「background」を使わないページは存在しないというくらい大切なので
確実に覚えた方が良いでしょう。

「image」「color」は、同時に使える

「background-image
「background-color
は、同時に使うことができます。

同時に使った場合、
 background-image = 前面
 background-color = 背面
へ入ります。

「画像は前面」「色は背面」と覚えると良いでしょう。

そして

この「image」「color」同時に使う方法は、

 1:背景画像の寸法が少し足りないのを同系色の背景色でおぎなう
 2:背景画像を枠で囲っているように見せる

などに使えます。

blog-css-background20

background-imageは、開始位置を変えることができる

「background-image」は、
「background-origin」を使うと開始位置を変えることができます。

画像blog-css-background24

プロパティbackgroundは8種 + 一括指定

プロパティbackgroundの種類は、
8種類 + 一括指定があります。

(1)background-color    = 色
(2)background-image   = 画像
(3)background-clip    = ボックスモデルの使用範囲
(4)background-origin   = 背景画像の開始位置
(5)background-size    = 大きさを変える
(6)background-repeat   = 繰り返し
(7)background-position  = 置き場所
(8)background-attachment = スクロールへの対応

(9)background = 一括設定

(注意)
「(9)background=一括設定」の説明は省きます。

(1)background-color

「background-color」は、
背景の色を決めるプロパティです。

値は5種類あります。

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent幅、高さは
そのままに透明
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
「継承方向へ色を使いまわせるプロパティ」です。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への使い回しはできますが、

兄弟要素方向へはできません。

(2)background-image

background-imageは、
背景画像を入れるプロパティです。

値は2種類あります。

 1:none = 画像を表示しません。
 2:url  = URLを相対パス、絶対パスで指定して
        画像を入れます。

1:none

noneは、
画像を表示しません。

background-image: none;
2:url( )

url( )は、
URLを相対パス、絶対パスで指定し、
画像を入力します。

background-image: url(img/bg_nangoku02.jpg);
background-image: url(https://omosirofuturestory.com/img/bg_nangoku02.jpg);

background-image: url(img/bg_nangoku02.jpg);
background-image: url(https://omosirofuturestory.com/img/bg_nangoku02.jpg);
background-image: none;
background-image: url(img/bg_nangoku02.jpg);
background-image: url(https://omosirofuturestory.com/img/bg_nangoku02.jpg);

(3)background-clip

clipは、
「ボックスモデルのどこまでをbackgroundの表示領域にするか」を決めるプロパティです。

clipは、
「background-color」「background-image」どちらにも影響を与えます。

clipは、
指定したボックスモデルの分だけ表示されます。

外側は切り抜かれ表示されなくなります。

例1)

「background-clip: content-box

clipで「content」を指定した場合。

(指定前)

画像blog-css-background22

(指定後)

画像blog-css-background23

「content」の外側は切り抜かれ表示されなくなる。

clipは、
指定したボックスモデルだけが表示領域となります。

なので、
背景画像の「background-image」がある状態でclipを使う時は、

背景画像の開始位置を変える
background-origin
を合わせて指定すると良いでしょう。

background-clipbackground-origin
content-boxcontent-box開始位置はcontent-box

表示領域はcontent-boxまで
content-boxより外側は非表示
padding-boxpadding-box開始位置はpadding-box

表示領域はpadding-boxまで
padding-boxより外側は非表示
border-boxborder-box開始位置はborder-box

表示領域はborder-box
border-boxより外側はない
(marginは空白にしか使えない)

clipの値は3種類あります。

 1:content-box = contentまでを表示領域にします。
 2:padding-box = paddingまでを表示領域にします。
 3:border-box  = borderまでを表示領域にします。

1:background-clip content-box

content-boxは、
contentまでを表示領域にします。

画像blog-css-background02
background-clip: content-box;
2:background-clip padding-box

padding-boxは、
paddingまでを表示領域にします。

画像blog-css-background03
background-clip: padding-box;
3:background-clip border-box(デフォルト)

border-boxは、
borderまでを表示領域にします。

画像blog-css-background04
background-clip: border-box;

(4)background-origin

originは、
「左上を起点に背景画像の開始位置」を決めるプロパティです。

背景色ではありません。
背景画像の開始位置だけを決めるプロパティです。

originは、
小さい画像をたくさん並べて背景画像にする時は
特に重要になるプロパティです。

例1)

表示領域は「content」
開始位置は「padding」

このように「表示位置」「開始位置」がずれているため
画像は途中から始まっている。

画像blog-css-background16

originの値は3種類あります。

 1:content-box = contentの左上を背景画像の開始位置にします。
 2:padding-box = paddingの左上を背景画像の開始位置にします。
 3:border-box  = borderの左上を背景画像の開始位置にします。

1:background-origin content-box

「content-box」は「contentの左上が背景画像の開始位置」になります。

画像blog-css-background17

(注意)表示領域を「content-box」にしています。

background-origin: content-box;
2:background-origin padding-box

「padding-box」は「paddingの背景画像の左上が開始位置」になります。

画像blog-css-background18

(注意)表示領域を「padding-box」にしています。

background-origin: padding-box;
3:background-origin border-box

「border-box」は「borderの左上が背景画像の開始位置」になります。

blog-css-background19

(注意)表示領域を「border-box」にしています。

background-origin: border-box;

(5)background-size

sizeは、
「背景画像を拡大縮小する」プロパティです。

sizeは、
background-clipで選んだボックスモデルの領域
を基本として拡大縮小します。

sizeは、
画像を拡大縮小するプロパティなので

あまりにも
「拡大」「縮小」しすぎると画像は荒れます。

sizeの値は3種類あります。

 1:contain = 画像の比率はそのままに、縮小する
 2:cover  = 画像の比率はそのままに、拡大する
 3:数値、パーセント、auto指定

1:background-size contain

containは、
画像の比率はそのままに「画像全体が入る」ようにします。

画像blog-css-background25
background-size: contain;
2:background-size cover

coverは、
「空き領域ができない」ように画像の比率を保ったまま拡大されます。

画像blog-css-background26
background-size: cover;
3:数値、パーセント、auto指定

数値、パーセント、auto指定の指定もできます。

指定する場合は、
ヨコ方向、タテ方向の順番になります。

background-size: ヨコ方向 タテ方向;

<数値指定(px、emなど)>

画像の比率を無視してその数値で表示します。

画像blog-css-background27

<パーセント指定>

画像の比率を無視して
background-clipの領域を100%として
パーセントで指定できます。

例1)
background-size: 50% 50%;

画像blog-css-background29

例2)
background-size: 100% 100%;

ヨコ、タテを100%を指定すると、
比率を無視して
画像が領域いっぱいへなるよう調整されます。

画像blog-css-background28

<auto指定>

auto指定は
「もともとの画像の寸法」をそのまま入れ込みます。

background-size: auto auto;(デフォルト)
ヨコ方向、タテ方向の2つともautoを指定した場合、
画像の寸法通りそのまま入れ込みます。

例1)
元画像

画像blog-css-background05

background-size: auto auto;

画像blog-css-background06

領域からはみ出ても
領域が足りなくても
画像の寸法そのまま入れ込みます。

ヨコ方向は画像が足りていません。
タテ方向は画像の下が切れています。

<autoと100%の同時使用>

autoと100%は同時に指定もできます。

autoは画像の寸法そのまま。
100%は無理矢理にでも画像を拡大、縮小して入れ込みます。

・background-size: 100% 100%の場合

ヨコ方向、タテ方向とも「拡大、縮小してでも」画像を無理やり入れる。

画像blog-css-background07

・background-size: auto 100%の場合

ヨコ方向 = 画像の寸法そのまま
タテ方向 = 表示領域へ画像を「拡大、縮小してでも」画像を無理やり入れる。

画像blog-css-background08

・background-size: 100% autoの場合

ヨコ方向 = 表示領域へ画像を「拡大、縮小してでも」画像を無理やり入れる
タテ方向 = 画像の寸法そのまま

画像blog-css-background09
background-size: auto auto;
background-size: 100% 100%;

(6)background-repeat

repeatは、
小さい画像を繰り返し表示するか決める
プロパティです。

小さい画像をたくさん並べる時に
使います。

値は6種類あります。
 1:repeat-x  = ヨコ繰り返し
 2:repeat-y  = タテ繰り返し
 3:repeat   = 繰り返し
 4:space   = 繰り返し(スペースで調節)
 5:round   = 繰り返し(拡大縮小で調節)
 6:no-repeat = 繰り返さない

1:background-repeat repeat-x

repeat-xは、
ヨコ方向だけ
小さな画像を繰り返し表示します。

画像blog-css-background10
background-repeat: repeat-x;
2:background-repeat repeat-y

repeat-yは、
タテ方向だけ
小さな画像を繰り返し表示します。

画像blog-css-background11
background-repeat: repeat-y;
3:background-repeat repeat(デフォルト)

repeatは、(デフォルト)
ヨコ、タテ方向に
小さな画像を繰り返し表示します。

画像が途切れても、
気にせず表示します。

画像blog-css-background12
background-repeat: repeat;
4:background-repeat: space

spaceは、
ヨコ、タテ方向に
小さな画像を繰り返し表示します。

画像の寸法はそのままに「画像の間のスペース」で調節します。

画像blog-css-background13
background-repeat: space;
5:background-repeat: round

roundは、
ヨコ、タテ方向に
小さな画像を繰り返し表示します。

画像の感覚はそのままに「画像自体を拡大、縮小して」調節します。

画像blog-css-background14
background-repeat: round;
6:background-repeat no-repeat

no-repeatは、
画像を繰り返し表示しません。

大きい画像1枚入れる時は、
no-repeatを使って
画像の繰り返し表示を止めます。

画像blog-css-background15
background-repeat: no-repeat;

(7)background-position

positionは、
「背景画像をどこに置くか決める」プロパティです。

背景画像には2種類あります。

1:領域より小さい画像
2:領域より大きい画像

<1:領域より小さい画像>

領域より小さい画像は普通に「指定した場所」へ置かれます。

<2:領域より大きい画像>

領域より大きい画像は、指定した位置へ置かれます。

ですが

領域より画像の方が大きいので当然はみ出ます。

はみ出た部分は表示されなくなります。

そして

この表示されないことを利用して「background-position」を使っての
「画像をトリミングする方法」もあります。

トリミングとは

不要な部分を切り落とし
必要な部分を残すこと。

領域より大きい画像を「background-position」を使ってトリミングする>

背景画像は、
「background-clip」で決めた領域だけ表示されます。

逆にいうならば、
「background-clip」からはみ出た部分は表示されません。

これを利用して、
背景画像の不要な部分を「わざとはみ出させ」背景画像をトリミングします。

<「background-position」でのトリミング例>

下の画像は、
background-positionを使ったトリミングの例です。

黒い枠は「background-clipの表示領域」です。

背景画像をbackground-positionを使って「左上に置いた」場合、
右側、下側がはみ出ます。

当然

このはみ出た部分は表示されません。

画像blog-css-background21

このようにして、
わざと外へはみ出させトリミングをします。

値は3種類あります。
 1:場所指定 (top bottom left right center)
 2:%指定  (10% 50%)
 3:px指定  (30px 50px)

background-positionの値の指定は、
「とてもややこしい」ため別記事を用意しました。

よければそちらをご覧ください。

background-position: center;
background-position: top;
background-position: left;
background-position: bottom;
background-position: right;

background-position: 50% 50%;

background-position: 50px -30px;

(8)background-attachment

attachmentは「スクロールした時どう表示するか」を決めるプロパティです。

値は2種類あります。
 1:scroll (デフォルト)
 2:fixed

1:background-attachment scroll(デフォルト)

scrollは、(デフォルト)
文字と同時に背景もスクロールします。

2:background-attachment fixed

fixedは、
文字はスクロールしますが、
背景はスクロールしません。

fixedは「画面がとても見辛く」なります。

特別な理由がない限り、
使わない方が良いでしょう。

background-attachment: scroll;
background-attachment: fixed;

まとめ

backgroundとは

backgroundは「背景へ色や画像を入れる」プロパティ。

backgroundは、8種類+一括指定

プロパティbackgroundは、
8種類 + 一括指定。

(1)background-color    = 色
(2)background-image   = 画像
(3)background-clip    = ボックスモデルの使用範囲
(4)background-origin   = 背景画像の開始位置
(5)background-size    = 大きさを変える
(6)background-repeat   = 繰り返し
(7)background-position  = 置き場所
(8)background-attachment = スクロールへの対応

(9)background = 一括設定

background-color、background-imageは、同時に使うことができる

background-color
background-image
は、同時に使うことができる。

同時に使った場合、
 background-image = 前面
 background-color = 背面 
へ入る。

「画像は前面」「色は背面」と覚えると良いでしょう。

blog-css-background20
background-imageは、開始位置を変えることができる

「background-image」は、
「background-origin」を使うと開始位置を変えることができます。

画像blog-css-background24

以上、
background
の話でした。

ありがとうございました。

【関連記事】html, cssの記事こちら

タイトルとURLをコピーしました