Почему css background-size/position не работает со стенографическим url?

Question

Я работал над идеей создания слайд-шоу/одной страницы и был в хорошей точке остановки. Поскольку у меня была суть моей идеи на JSFIDDLE, я начал очищать свой css. На каждом из 5 вкладок все они используют те же строки css, кроме фонового изображения.

Это, как я имел CSS, (рабочий один) -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; 
} 

Это было немного некрасиво со мной, так что я понял, я бы очистить это и упростить его, как это так, -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; 
} 

С помощью этого

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

сделал дивы игнорировать тот служ o строк css. Я не вижу ничего плохого в моем коде и не уверен на 100%, почему этот css не используется. Когда я проверяю консоль, он говорит, что это недопустимое значение свойства.

Любые идеи?

Answer 1

Вы должны использовать background-image вместо стенографии background. Сокращение background сбрасывает background-size и background-position на их значения по умолчанию, поэтому первое правило не делает ничего.

Перемещение общего CSS последнего в файле также заставило бы его работать, сказав последний раз, хотя, конечно, это не настоящее решение.