CSSイベント「Back to Basics」http://peatix.com/event/105960 で話した、background-image と background-size について解説したスライドです。

1. はじめに
この資料はあくまで参考情報です
正式な文書を読みたい場合は
http://www.w3.org/TR/ 以下にある
文書を読んでいただくよう
お願いします

2. background-
(image|size)
の深みへようこそ

3. 自己紹介
• kubosh(o|0)_? (株式会社グラニ 所属)
• Twitter: kubosho_
• GitHub: kubosho
• http://blog.kubosho.com

4. 今日話すこと

5. background-image と
background-size の
ブラウザでの挙動から
知る仕様

6. 以下を参考にした話をします
• CSS Backgrounds and Borders Module Level 3
- http://www.w3.org/TR/css3-background/
• CSS Backgrounds and Borders Module Level 3 (日本語訳)
- http://www.hcn.zaq.ne.jp/___/WEB/css-backgrounds-ja.html
- W3C Editor's Draft の日本語訳
• CSS Image Values and Replaced Content Module Level 3
- http://www.w3.org/TR/css3-images/
• CSS Image Values and Replaced Content Module Level 3 (日本語訳)
- http://www.hcn.zaq.ne.jp/___/WEB/css-images-ja.html
- W3C Editor’s Draft の日本語訳

7. background-image や
background-size の
のような挙動に
出会ったことはありませんか

8. 自分はあります

9. 複数画像のアニメーションを
することができない
(書き方次第では
何も表示されない)

10. background ショートハンド
プロパティの値に
background-size の値を含むと
背景に何も表示されない

11. 具体例

12. 複数画像のアニメーションを
することができない
(書き方次第では
何も表示されない)

13. クロスフェードアニメーション
.example
{
width:
400px;
height:
200px;
animation:
crossfade
5s
linear
0s
infinite
alternate;
}
@keyframes
crossfade
{
0%
{
background-­‐image:
url("images/foo.png");
}
100%
{
background-­‐image:
url("images/bar.png");
}
}

14. http://jsfiddle.net/
bo5rj0b5/14/

15. Chrome 46.0.2486.0 dev

16. Firefox 42.0a2

17. background ショートハンド
プロパティの値に
background-size の値を含むと
背景に何も表示されない

18. 以下のように書いたものは
.example
{
background-­‐image:
url("images/foo.png");
background-­‐position:
top
left;
background-­‐size:
auto
auto;
}

19. こう書くこともできる
.example
{
background:
url("images/foo.png")
top
left
/
auto
auto;
}

20. https://jsfiddle.net/
4frxn6uL/

21. Chrome 46.0.2486.0 dev

22. Android 4.2.2 Browser

23. なぜこうなるのか
仕様を読み解いていきます

24. 複数画像のアニメーションを
することができない
(書き方次第では
何も表示されない)

25. そもそも
background-image は
仕様上はアニメーションが
できない

27. Firefox の実装が正しい

28. アニメーションできるプロパティ
• background-color
• background-position
• 単一もしくは複数の値
• background-size
• 値に contain, cover, auto を指定している時除く

29. background ショートハンド
プロパティの値に
background-size の値を含むと
背景に何も表示されない

30. 仕様の話

32. 仕様上は background-position
の値指定の後に「/」で区切って
background-size の値指定が
できる

33. 実装の話

34. Android 2系では
background-size に
-webkit- プリフィックスが必要

35. background ショートハンド
プロパティ内に
background-size の値を
含めるとスタイル指定が
無効になる

36. Android 4.3までは
background ショートハンド
プロパティの値として
background-size の値を
内包する記法に対応しないため
スタイル指定が無効になる

37. background-size は
background ショートハンド
プロパティ内で
指定しないほうが(今は)良い

38. background-size の安
.example
{
background:
url(“images/foo.png")
top
left
no-­‐
repeat
#fff;
-­‐webkit-­‐background-­‐size:
auto
auto;
background-­‐size:
auto
auto;
}

39. プリフィックスは面倒なので
Autoprefixer を使うのが良い

40. 余談

41. background-* プロパティの
指定を個別でした後に
background ショートハンド
プロパティを指定した場合
値が上書きされる

42. https://jsfiddle.net/
1wfs92e5/3/

45. より深みへ

46. background-image

47. CSS Backgrounds and
Borders Module Level 3
より background-image
(とその他の背景関連プロパ
ティ)の値にカンマ区切りで
複数の値を指定できるように
なった

48. 複数の値を指定するサンプル
.example
{
background-­‐image:
url("images/foo.png"),
url("images/bar.png");
}

49. https://jsfiddle.net/
1wfs92e5/

51. background-image は
背景に表示する画像を
指定するだけではない

52. 背景のレイヤーの数も
background-image で
指定された値の数によって
決まる

53. 背景のレイヤー？

54. この場合五つのレイヤーがある
.example
{
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png"),
url(“images/barbaz.png");
/*
background-­‐repeat
の値は五つ指定できる
*/
background-­‐repeat:
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat;
}

55. 背景のレイヤーの数によって
background-* プロパティの
値を指定できる数が変わる

56. 背景のレイヤーの数以上に
background-* プロパティに
値を指定した場合はどうなる？

57. .example
{
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png"),
url("images/barbaz.png");
background-­‐repeat:
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat;
}

58. 背景のレイヤーの数以上に
background-*プロパティに
値を指定した場合は
レイヤーの数以降の
指定が無視される

59. .example
{
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png"),
url("images/barbaz.png");
background-­‐repeat:
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat;
}

60. .example
{
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png"),
url(“images/barbaz.png");
/*
六個目の値は無視されるので、
実質以下のような値指定になる
*/
background-­‐repeat:
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat,
no-­‐repeat;
}

61. 背景のレイヤーの数より
background-*プロパティの
値指定の数が足りない場合は？

62. .example
{
width:
800px;
height:
800px;
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png");
background-­‐repeat:
repeat-­‐x,
no-­‐repeat;
background-­‐position:
top
0
left
0,
top
200px
left
0,
top
400px
left
0,
top
600px
left
0;
}

63. それまでに指定した
値の指定が繰り返される

64. .example
{
width:
800px;
height:
800px;
background-­‐image:
url("images/foo.png"),
url("images/bar.png"),
url("images/baz.png"),
url("images/foobar.png");
background-­‐repeat:
repeat-­‐x,
no-­‐repeat,
repeat-­‐x,
no-­‐repeat;
background-­‐position:
top
0
left
0,
top
200px
left
0,
top
400px
left
0,
top
600px
left
0;
}

65. https://jsfiddle.net/
1wfs92e5/4/

67. 背景のレイヤーは
background-image の値で
先に指定したものが上に
後に書いたものほど下に
重なって表示される

68. background-size

69. contain, cover, auto
という値について

70. contain

71. Scale the image, while preserving its
intrinsic aspect ratio (if any), to the
largest size such that both its width
and its height can fit inside the
background positioning area.
(Google 翻訳) 幅と高さの両方が、背景配
置領域内に収まることができるように、最
大の大きさに、（もしあれば）その固有の
縦横比を維持しながら、画像を拡大縮小。

72. cover

73. Scale the image, while preserving its
intrinsic aspect ratio (if any), to the
smallest size such that both its width
and its height can completely cover
the background positioning area.
(Google 翻訳) 最小のサイズに、（もしあ
れば）その固有の縦横比を維持しながら、
画像を拡大縮小幅と高さの両方が完全に
バックグラウンド配置領域を覆う。

75. background-size: contain;
と指定すると要素内に収まる
ように表示される
繰り返し指定がある場合は
繰り返して表示される

77. background-size: cover;
と指定すると画像の大きさに
関係なしに 間なく
要素に収まって表示される

78. どちらの指定でも
アスペクト比は
維持される

79. auto

80. background-size の
幅と高さのどちらかに
指定している場合
画像の内在サイズを使って
幅もしくは高さが算出される

81. 内在サイズ？

82. 画像などのオブジェクトが
持っている縦・横幅・縦横比
の総称

83. ラスター形式の画像
(JPEG, GIF, PNG…)は
縦・横幅・縦横比が
っている

84. ベクター形式の画像 (SVG) は
縦横比のみという場合や
縦・横幅のどちらかしかない
場合がある

85. グラデーションは
内在サイズを持たない

86. 画像などのオブジェクトが
持っている縦・横幅・縦横比
の総称

87. というのを覚えておいて
ください

88. 元に戻って
background-size の
auto 値の話

89. 画像の内在サイズが
ない場合は 100% になる

90. 幅と高さの両方に
指定されていて
画像の内在サイズが
ある場合は
それが使われる

91. 画像の内在サイズが
ない場合は contain になる

92. https://jsfiddle.net/
nkd3bu73/2/

93. まとめ

94. W3C の仕様と
ブラウザの実装は
一部異なる場合がある

95. CSS のプロパティと値の
書き方に気を使う

96. クロスフェードアニメーション
.example
{
width:
400px;
height:
200px;
animation:
crossfade
5s
linear
0s
infinite
alternate;
}
@keyframes
crossfade
{
0%
{
background-­‐image:
url("images/foo.png");
}
100%
{
background-­‐image:
url("images/bar.png");
}
}

97. Firefox 42.0a2

98. 変更後
.example
{
width:
400px;
height:
200px;
background-­‐image:
url("images/foo.png");
animation:
crossfade
5s
linear
0s
infinite
alternate;
}
@keyframes
crossfade
{
0%
{
background-­‐image:
url("images/foo.png");
}
100%
{
background-­‐image:
url("images/bar.png");
}
}

99. http://jsfiddle.net/
bo5rj0b5/15/

100. Firefox 42.0a2

101. とりあえず画像は表示される

102. クロスフェードしたい場合は？

103. 擬似要素と opacity を
使う

104. http://codepen.io/
geckotang/pen/MagNoK?
editors=110

105. background-image は
背景画像を指定する
だけではなく
背景のレイヤーの数にも
影響する

106. background-size の
contain, cover は
同じように見えて違うので
使い分け大事

107. 皆さんも
background-image
background-size
の深みに入りましょう

108. ありがとうございました
https://twitter.com/kubosho_
https://github.com/kubosho
http://blog.kubosho.com

109. 画像の引用元一覧 その一
• Cat show: Form | Flickr
© Tomi Tapio K (CC-BY 2.0)
https://www.flickr.com/photos/tomitapio/
4305303148
• Nasty cat ! | Flickr
© Hannibal Poenaru (CC-BY-SA 2.0)
https://www.flickr.com/photos/poenaru/
1304953088/

110. 画像の引用元一覧 その二
• Cat | Flickr
© Chris Erwin (CC-BY 2.0)
https://www.flickr.com/photos/crerwin/
1089567053/
• Cat | Flickr
© Martie Swart (CC-BY 2.0)
https://www.flickr.com/photos/martie1swart/
6297998606/