どの要素に指定しても、ブラウザ表示領域の左上が基準みたい
次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。
|
1 2 3 |
div { background:#fef url(img/bg.gif) no-repeat right bottom fixed; } |
確認してみる
この背景画像を指定してチェック
![[image]使った背景画像](http://blog.sakurachiro.com/wp-content/uploads/2010/10/bg.gif "使った背景画像")
例えばoverflow:hidden;のdivに
background-attachment: scroll;
![[image]divにbackground-attachment: scroll;](http://blog.sakurachiro.com/wp-content/uploads/2010/10/20101023-3.png "divにbackground-attachment: scroll;")
期待通りの表示位置。
background-attachment: fixex;
![[image]overflow:hidden;のdivにbackground-attachment: fixex;](http://blog.sakurachiro.com/wp-content/uploads/2010/10/20101023-4.png "overflow:hidden;のdivにbackground-attachment: fixex;")
divの外に出た、右も下もブラウザ(html)のサイズ基準になってる。
bodyに
background-attachment: scroll;
![[image]bodyにbackground-attachment: scroll;](http://blog.sakurachiro.com/wp-content/uploads/2010/10/20101023-2.png "bodyにbackground-attachment: scroll;")
期待した表示と違う。
background-colorはブラウザサイズいっぱいで、background-imageは内容量に合わせて高さが変わる？
以前(YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。)で、htmlにbackground-colorが指定されているとbodyの背景がbodyの内容までしか着色されない事があったけど
htmlにbackgroundが指定されていない時は、背景色に限り拡張されてるの？
面倒くさいから背景画像の方も表示領域を拡張してくださいよ><;
background-attachment: fixex;
![[image]bodyにbackground-attachment: fixed;](http://blog.sakurachiro.com/wp-content/uploads/2010/10/20101023-1.png "bodyにbackground-attachment: fixed;")
ブラウザの左上(html)を基準にright bottomになりまんた。
色々指定して試してみたつもりだけど、最近うっかりや、早とちりや、勘違いが多いのでまだ何か勘違いしてそうで怖いなぁ。
しかし、(個人的に)普段使わない指定の挙動というのは、こんなにも理解したつもりでいるのかと気づいて随分凹む。