65652


`z-index` を巨大に設定した疑似クラス `:after` に `background-image` を指定することで、ページ全体の前面に画像を縦横
repeat させようとしています。

下のように書くと一見上手くいったかのように見えるのですが、実は最初に描画された部分しか repeat
されておらず、ページをスクロールして描画外にいくと画像が表示されなくなってしまいます。

ページ全体に対して repeat させるようにするにはどうすれば良いでしょうか？

[code]

    .cover-image {
      opacity: 0.3;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      pointer-events: none;
    }
    
    .cover-image:after {
      background-image: url("https://i.stack.imgur.com/M37fE.png");
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      pointer-events: none;
      display: block;
      content: "";
    }
[/code]

[code]

    <div class="cover-image"></div>
    
    <p>吾輩は猫である。名前はまだない。</p>
    <p>どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮て食うという話である。しかしその当時は何という考（かんがえ）もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛を以て装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後猫にも大分逢（あ）ったがこんな片輪には一度も出会（でく）わした事がない。のみならず顔の真中が余りに突起している。そうしてその穴の中から時々ぷうぷうと烟（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む烟草（タバコ）というものである事は漸（ようや）くこの頃（ごろ）知った。</p>
    <p>この書生の掌の裏（うち）でしばらくはよい心持に坐っておったが、暫（しばら）くすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないがむやみに眼（め）が廻（まわ）る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。</p>
[/code]

環境はとりあえず最新安定版の Google Chrome で動けば良いです。JavaScript を使っても構いません。

↓手元での実行結果の gif アニメです。

[![](https://i.stack.imgur.com/DkSBz.gif)](https://i.stack.imgur.com/DkSBz.gif)


CC BY-SA 4.0
2020-04-15T10:33:15.583
65647
2020-04-15T13:33:48.443
2020-04-15T11:13:43.257
19110
19110
question
css
background-image の repeat による繰り返しが、最初に表示された画面サイズで止まってしまう


絶対配置された要素は、包含ブロックに対して相対配置されます。今回の場合、包含ブロックは **初期包含ブロック** (ビューポート) であるため、
`.cover-image` はビューポート全体に広がります。

> ### 10.1 Definition of "containing
> block"[[1]](https://www.w3.org/TR/CSS2/visudet.html#containing-block-
> details)
>
>   4. If the element has 'position: absolute', the containing block is
> established by the nearest ancestor with a 'position' of 'absolute',
> 'relative' or 'fixed', in the following way:
>     1. In the case that the ancestor is an inline element, the containing
> block is the bounding box around the padding boxes of the first and the last
> inline boxes generated for that element. In CSS 2.1, if the inline element
> is split across multiple lines, the containing block is undefined.
>     2. Otherwise, the containing block is formed by the padding edge of the
> ancestor.
>

>
> If there is no such ancestor, **the containing block is the initial
> containing block**.

ビューポートのサイズが文書内容よりも小さい場合、通常はスクロール機構が提供されます。これにより、スクロールすることで文書内容全体を閲覧出来ますが、
**ビューポートのサイズ自体は変化していない** ため、背景画像は文書内容全体へ広がりません。

この問題は包含ブロックを初期包含ブロック以外にすることで解決出来ます。

[code]

    body {
      position: relative;
      margin: 0;
    }
    
[/code]

[code]

    body {
      position: relative;
      margin: 0;
    }
    
    p:first-of-type {
      margin-top: 0;
    }
    
    p:last-of-type {
      margin-bottom: 0;
    }
    
    .cover-image {
      opacity: 0.3;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      pointer-events: none;
    }
    
    .cover-image:after {
      background-image: url("https://i.stack.imgur.com/M37fE.png");
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      pointer-events: none;
      display: block;
      content: "";
    }
[/code]

[code]

    <div class="cover-image"></div>
    
    <p>吾輩は猫である。名前はまだない。</p>
    <p>どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮て食うという話である。しかしその当時は何という考（かんがえ）もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛を以て装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後猫にも大分逢（あ）ったがこんな片輪には一度も出会（でく）わした事がない。のみならず顔の真中が余りに突起している。そうしてその穴の中から時々ぷうぷうと烟（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む烟草（タバコ）というものである事は漸（ようや）くこの頃（ごろ）知った。</p>
    <p>この書生の掌の裏（うち）でしばらくはよい心持に坐っておったが、暫（しばら）くすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないがむやみに眼（め）が廻（まわ）る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。</p>
[/code]

また、 `opacity` プロパティを用いた場合と完全に同一というわけではありませんが、 `background-image` プロパティを `body`
要素へ適用する方法もあります。

[code]

    body {
      background: linear-gradient(
        rgba(255,255,255,.7), 
        rgba(255,255,255,.7)
      ),
      url("https://i.stack.imgur.com/M37fE.png");
    }
    
[/code]

[code]

    body {
      background: linear-gradient(
        rgba(255,255,255,.7), 
        rgba(255,255,255,.7)
      ),
      url("https://i.stack.imgur.com/M37fE.png");
    }
[/code]

[code]

    <p>吾輩は猫である。名前はまだない。</p>
    <p>どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮て食うという話である。しかしその当時は何という考（かんがえ）もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛を以て装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後猫にも大分逢（あ）ったがこんな片輪には一度も出会（でく）わした事がない。のみならず顔の真中が余りに突起している。そうしてその穴の中から時々ぷうぷうと烟（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む烟草（タバコ）というものである事は漸（ようや）くこの頃（ごろ）知った。</p>
    <p>この書生の掌の裏（うち）でしばらくはよい心持に坐っておったが、暫（しばら）くすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないがむやみに眼（め）が廻（まわ）る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。</p>
[/code]


CC BY-SA 4.0
2020-04-15T13:33:48.443
65652
2020-04-15T13:33:48.443
32986
65647
answer