Абсолютно позиционированный div размер фона: обложка не работает

Question

У меня есть подразделение с классом popOver.

CSS

.popOver { 
    position: absolute; 
    left: 100px; 
    right: 100px; 
    top: 100px; 
    bottom: 100px; 
    background-size: cover; 
    background:url('http://lorempixel.com/400/200'); 
} 

Это не приводит, как и ожидалось. background-size: cover не шов, чтобы иметь какой-либо эффект, почему это так?

Вот скрипкаhttp://jsfiddle.net/ksLd13y8/

Answer 1

Это потому, что свойство background-size в настоящее время переписывается background собственности устанавливается после его. От MDN:

Если значение этого свойства не установлено в background сокращённом свойстве, которое применяется к элементу после свойства background-size CSS, значение этого свойства затем сбрасывается до первоначального значения в сокращенном имущество.

Вот три варианта:

• Установите background-size свойство после в background свойство:

  Example Here

  background: url('http://lorempixel.com/400/200'); 
  background-size: cover; 
  

• Используйте свойство background-image установить фоновое изображение, а не сокращённого свойства background:

  Example Here

  background-size: cover; 
  background-image: url('http://lorempixel.com/400/200'); 
  

• Или использовать сокращенную установить оба свойства:

  Example Here

  background: url('http://lorempixel.com/400/200') 0 0/cover;