How to add a 20px div above a header background image (with Fiddle)

Question

On the top of my page I have a background image as below ( http://jsfiddle.net/VnXxj/3/ )

<div id="header">
Register/Login
</div>

#header {
    background: url("image.png") repeat-x scroll center bottom;
    height: 37px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

Instead of increasing the image's height in Photoshop, is there any way to add a 20px height div above the image?

I tried background: url("image.png") repeat-x scroll center bottom #888888; but the image it has a transparent ending and it mess it.

Thank you for this

Answer 1

I believe this is what you want: http://jsfiddle.net/VnXxj/4/

EDIT: You might find this more useful as well. It's a bit more dynamic. http://jsfiddle.net/VnXxj/6/

Answer 2

try: #header { margin-top:20px; }