background-image change in mobile.css

Question

Ok, I am currently directing my style sheets as listed below:

<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />  
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>

On the Site.css I have a certain ID with a background-image:

#container { 
    width: 1000px;
    margin-left: auto;
    margin-right: auto; 
    background: url('../images/topbackground.gif') no-repeat;
}

On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):

#container {
    width: 100%;
    margin-left: 0;
    margin-right: 0; 
    background: #ffffff none;
    z-index: 30;
}

However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.

I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.

Answer 1

this is because you load mobile.css before you load Site.css. (in the example you have made). I thinks its working if you juste insert site first then mobile.css ..

If you need to keep it that way for some reason you gonna need to use !important afters the statement.

Here you can find a working example: http://jsfiddle.net/2EaQb/