Which background-image takes precedence.media query or css?

Question

My question is about background-images. I was designing a home page for iPhone screen and I wanted to use a slightly different image for the mobile version. My media query was not in a separate css file, just embedded in the index.html. Problem...the main css image was overriding my query image. I checked for extra brackets etc. I thought the media queries had precedence over the main css? Would I have got my desired result if I had put the Media query in a css link file?

Here is my main css code:

#container
{
  background-image:url(images/1000_framec.jpg);
  background-repeat:no-repeat;
  width:999px;
  height:980px;
  margin:0 auto;
}

and below is my media-query code:

@media only screen and max-width 320px {
  #container
  {
    width:98%;
    background:url(images/1000_frameo.jpg) no repeat left;
    margin-top:80px;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
  }
}

Answer 1

Media queries and @media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a @media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.

The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.