Adding an image to a container background using css

Question

First I have my container.

 .container {
    width: 780px;
    background: #FFF;
    margin: 0 auto;
}

Then I add this with the goal of having the image display across the container and spanning the 780px. The image will fade to pure black at the bottom and it will then mix with the background color.

.container {
        width: 780px;
        background: #FFF url(picture.png) no-repeat center top;
        margin: 0 auto;
}

Nothing happens when I do this, it does work when I do something similar to my site background through "body".

Thanks for the help.

Edit: The more I think about it, do I have to do this through HTML, is there a way to make an image inserted in the html fall behind everything else and not be able to be interacted with?

Edit 2: With the help from the first 2 answer I am at this:

.container {
    width: 780px;
    background: url(Portfolio Assets/PortfolioUnderNavbg.png) no-repeat center top #000;
    margin: 0 auto;
    height: 100%; 
}

But it still won't work, I forgot to mention that the page does have a header, so I think I have to somehow make the background image move down to be under the header but still in the container. I read that background only accepts percentage adjustments in height but that was older documentation. Is there a way to make it start at say, 100px down from the top of the container?

Answer 1

Change to background:url('your-image.png') no-repeat center top #FFF

What's happening is the #FFF color code is overriding the image url.

Some docs.

Answer 2

   .container 
    {
        width: 780px;
        background: #FFF url(picture.jpg) no-repeat center top;
        margin: 0 auto;
        height:100%;
   }

i think .... u give height:100%; like above code