Im using following CSS to set a background-image for my menu

#menuContainer
{
    background:url('../images/main-bg.png') repeat-x;
}

My CSS is inside

~/styles/site.css

and my image is inside

~/images/main-bg.png

The problem is this works perfectly in Chrome but it's not working in Firefox. But if change the URL to

#menuContainer
{
    background:url('images/main-bg.png') repeat-x;
}

It starts working in Firefox and in Chrome it doesn't work.

Can anyone please help?