css - ビューポートで停止する背景画像の繰り返し：100％が必要

Question

繰り返して背景画像を形成する小さな.pngファイルがあります。bodyコンテンツラッパーでmin-heightプロパティを使用するには、ページの高さを100％に設定する必要があります。ただし、background-imageを組み合わせて使用​​しようとするとheight:100%、ページをスクロールしたときに画像が途切れる結果になります。私が何を意味するかを詳しく説明するために写真を見てください：

上の背景 しかし、スクロールすると途切れます

ここにフィドルがあります：

http://jsfiddle.net/Nick_B/x2h3g/

ユーザーが下にスクロールした後でも、背景画像をページ全体で繰り返すにはどうすればよいですか？これがcssです：

body {  
    background-color:#9AAEBF; 
    overflow-y:scroll;
    height:100%;
}

html:after { /* from  www.css-tricks.com/snippets/css/transparent-background-images */
    background-image: url('http://www.example.com/img/background.png');    
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

あなたのアイデアをありがとう。