开发者

background-image change in mobile.css

开发者 https://www.devze.com 2023-02-01 03:31 出处:网络
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)\" />

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.


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消