Фоновое изображение слишком большое

Question

Я пытаюсь сделать мое фоновое изображение всегда 100% шириной, но оно не работает. С моим текущим кодом я получаю изображение, где хочу, но есть куча нежелательного мертвого пространства (весь желтый фон ниже рис.). Параметры переполнения не исправляют это.

Если я не учитываю фиксированную высоту/ширину, то по какой-либо причине изображение приобретает размер 0x0; если я использую background-size: cover, изображение становится слишком большим, и больше не сидит хорошо в моем родительском контейнере

jsFiddle: http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/

.mainpic { 
    background-image: url('http://www.placehold.it/1922x1080'); 
    width: 1922px; 
    height: 1080px; 
    background-size: contain; 
    max-width: 100%; 
    max-height: 100%; 
    background-repeat: no-repeat; 
} 

Answer 1

Вы можете просто сделать:

фон-размер: 100% 100%;

Это позволит сохранить фоновое изображение на 100% до размера контейнера, в котором он находится. Таким образом, если он находится в теле, он заполнит весь фон страницы.

Answer 2

Возможно, вас заинтересует объявление cover.

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover;