background-attachment:fixed;の基準点を勘違いしていた。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

どの要素に指定しても、ブラウザ表示領域の左上が基準みたい

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。

確認してみる

この背景画像を指定してチェック
[image]使った背景画像

例えばoverflow:hidden;のdivに

background-attachment: scroll;
[image]divにbackground-attachment: scroll;
期待通りの表示位置。

background-attachment: fixex;
[image]overflow:hidden;のdivにbackground-attachment: fixex;
divの外に出た、右も下もブラウザ(html)のサイズ基準になってる。

bodyに

background-attachment: scroll;
[image]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;
ブラウザの左上(html)を基準にright bottomになりまんた。

色々指定して試してみたつもりだけど、最近うっかりや、早とちりや、勘違いが多いのでまだ何か勘違いしてそうで怖いなぁ。

しかし、(個人的に)普段使わない指定の挙動というのは、こんなにも理解したつもりでいるのかと気づいて随分凹む。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

  1. ブランド スーパーコピー エルメス wiki より:

    2018年の新素材-新作
    高品質の追求 超N品を良心価格で提供
    HERMES(バッグコピー、財布コピー、時計コピー)
    クロエ CHLOE バッグなどです。
    ご不明点が ございましたらお気軽にお問い合わせください
    100%品質保証!満足保障!リピーター率100%!
    ロレックススーパーコピー,ROLEX時計コピーN級品販売専門店!
    ブランド スーパーコピー エルメス wiki https://www.kopii.net/products/p1/1/5/510.html

コメントを残す


You can add images to your comment by clicking here.