background-image changement de mobile.css

Question

Ok, je dirige actuellement mes feuilles de style comme indiqué ci-dessous:

<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"/>

Sur la Site.css j'ai un certain ID avec un background-image:

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

Sur la mobile.css je pensais que je pouvais changer simplement à « aucun » ou une autre image, un peu semblable à celui (je l'ai essayé plusieurs variantes à ce point):

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

Cependant, il ne semble pas fonctionner. L'arrière-plan montre encore sur la version mobile du site. Je l'ai regardé dans les deux Opera Mini et le SDK Android Emulator. La version mobile du site est ramassait toutes les autres propriétés de mobile.css, mais pas des changements background-image.

Je sais que ça doit être quelque chose d'évident à ce moment que je suis juste inconscient. Toute aide serait appréciée.

Answer 1

est parce que vous chargez mobile.css avant de charger Site.css. (Dans l'exemple que vous avez fait). Je pense que son travail si vous Juste insérer le site d'abord, puis mobile.css ..

Si vous avez besoin de garder cette façon pour une raison quelconque, vous allez besoin d'utiliser afters de !important la déclaration.

Vous trouverez ici un exemple de travail: http://jsfiddle.net/2EaQb/