Why does css background-size/position not work with shorthand background url?

Question

I was working on a slideshow/single page website idea and was at a good stopping point. Since I had the gist of my idea down on a JSFIDDLE I started to clean up my css. On each of the 5 tabs they all use the same lines of css besides the background image.

This is how I had the css, (working one) -fiddle-

#p-home {
    background: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}

#p-about {
    background: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}

This was a little ugly to me so I figured I would clean this up and simplify it like so, -fiddle-

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}

#p-home {
    background: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg") no-repeat;
}

#p-about {
    background: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg") no-repeat;
}

By using this,

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}

made the divs ignore those two lines of css. I don't see anything wrong with my code and am not 100% sure why that css is not being used When I inspect the console it says it is an invalid property value.

Any ideas?

Answer 1

You have to use background-image instead of the shorthand background property. Shorthand background resets background-size and background-position to their default values, which is why the first rule ends up not doing anything.

Moving the shared CSS last in the file would also make it work by having last say, although of course this is not a real solution.