How place background-image to the top of the div with padding

Question

In Html I've this code

<div class="page">
        <div id="header">
            ...
        </div>
</div>

And here is my css

.page {
    width: 1028px;
    background-color:#103250;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    background:url('/Img/SubpageBox1.png') no-repeat top;
    height:150px;
    padding-top:50px;
}

But now my background-image is placed out of div... On the top of the page... How can I place it on the top of the header?

Answer 1

You can specify the position of the background image:

background:url('/Img/SubpageBox1.png') no-repeat center 50px;

or using background-position css property.