Background Image with 100% height: Need to fill pa

Question

I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:

Background on top But when scrolling it is cut off

How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:

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

html:after {
    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;
}

Thanks for your ideas.

---

EDIT:

This is the image i need repeated:

Here is a fiddle:

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

Answer 1

Now used to background-size

As like this

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

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Demo Full page

Live Demo

Answer 2

you can achieve your desired result through give the backgroun-size:100% in your html:after

CSS

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Answer 3

try this

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