Помощь с фоновым изображением

Question

Я пытаюсь получить изображение своего рекламного щита примерно с разрешением 2200px 965px внутри div, расширяющего ширину экрана и 500 пикселей в высоту, без потери каких-либо частей изображения. Возможно ли это, у меня есть проблема, выполняющая эту задачу.

<div class="billboard"> </div> 

CSS:

height: 500px; 
background-repeat: no-repeat; 
background-attachment: fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
width: 100%; 
display:block; 
width:100%; 

Answer 1

Да, просто добавьте width: 1140px в код CSS, чтобы убедиться, что он не получает отрубили вообще.

Answer 2

Если это то, что вы хотите, фоновое изображение не отрубается, а генерирует уродливый выход.

Примечание: Изображение Я имеет точно такие же размеры, предоставленные Вами (2200px по 965px)

.billboard { 
 
    height: 500px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    -webkit-background-size: 100% 500px; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: 100% 500px; 
 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG); 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="billboard">ABV</div>

Вот если фрагмент не работает: JSfiddle