background-image Änderung mobile.css

Question

Ok, ich leite derzeit meine Stylesheets, wie nachstehend aufgeführt:

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

Auf der Site.css Ich habe eine bestimmte ID mit einem Hintergrund-Bild:

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

auf dem mobile.css ich dachte, ich es einfach auf „none“ oder ein anderes Bild, um dies etwas ähnlich verändern könnte (ich habe an dieser Stelle mehrere Varianten ausprobiert):

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

Es scheint jedoch nicht zu funktionieren. Der Hintergrund wird weiterhin auf der mobilen Version der Site angezeigt. Ich habe es sowohl in Opera Mini als auch im Android SDK Emulator angeschaut. Die mobile Version der Site erfasst alle anderen Eigenschaften von mobile.css, nur keine Hintergrundbildänderungen.

Ich weiß, dass es an dieser Stelle etwas Offensichtliches sein muss, das ich nicht wahrnehme. Jede Hilfe wäre willkommen.

Answer 1

Dies liegt daran, dass Sie mobile.css laden, bevor Sie Site.css laden. (in dem Beispiel, das Sie gemacht haben). Ich denke, es funktioniert, wenn Sie zuerst Website einfügen dann mobile.css ..

Wenn Sie es aus irgendeinem Grund behalten müssen Sie !important nach der Aussage verwenden müssen.

Hier können Sie ein funktionierendes Beispiel finden: http://jsfiddle.net/2EaQb/