Unwanted margin when setting background on HTML element in CSS

Question

So it is fairly well known that you can add a background image to the HTML tag and the BODY tag to get a double background effect without adding extra div elements. I love that you can do this, but when I attempt it extra margin gets added to the top of the BODY element.

I did find that if you added the following code:

*{
    margin: 0;
}

it will get rid of this margin, but it also makes it so I have to reset all the other elements that I didn't want to get rid of margin on.

Does anyone know of a way to just get rid of the HTML tag margin.

This:

html {
    margin: 0;
}

doesn't work BTW. It seems to be something else causing the extra spacing.

UPDATE: Here is the JS Bin example. http://jsbin.com/ebefah/2

I am running an HTML5 doctype and I have gotten rid of the margin on the body as well.

ANSWER: Thank you to thirtydot. The answer was the H1, due to collapsing margins. Once I got rid of the top margin on the H1 it all worked flawlessly. Thank you again!

Answer 1

The gap is coming from the h1 (which has some margin-top by default), due to the effects of collapsing margins.

Read this.

You possibly just want to set margin-top: 0 on the h1.