ошибка загрузки изображения - слишком большая полезная нагрузка

Пусть прозрачное изображение диктует ваши размеры DIV.

jsBin demo

Внутри этого div поместить то же самое image

установил это изображение на

#mainHeaderWrapper{
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}

Таким образом, высота DIV будет определяться содержащимся невидимым изображением, если для параметра background-image установлено значение ] center, full (50% / 100%), он будет соответствовать пропорциям этого изображения.

Не уверен, хотите ли вы манипулировать цветами фонового изображения или что (используя CSS3 filter), но теперь, прочитав снова то, что я написал ... Не проще ли просто поместить изображение внутри DIV? :)

Нужно какое-то содержимое внутри DIV?

jsBin demo Из-за содержащего изображения вам понадобится дополнительный дочерний элемент, который будет установлен на position:absolute и действовать как элемент наложения

   
   

     Some content...
   

#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}