CSS background image - отзывчивое изображение, которое масштабируется без зависимости от размера изображения.

Question

Im пытается получить фоновое изображение, которое масштабирует изображение целиком, в зависимости от размера изображения и соответствует всем экранам, отображающим точно такие же. Я получил его, чтобы работать, но после того, как я изменил изображение, он больше работает. Ох, и им с помощью Bootstrap 3.

Heres мой CSS:

.bg { 

    background-image: url(http://pikahinaukset.wpengine.com/wp- content/uploads/2015/06/coverphoto-e1433360465261.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) center center cover no-repeat fixed; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 

} 

Отредактировано:

Heres HTML http://jsfiddle.net/jw7L2s3y/

Answer 1

Вы делаете что-то избыточную: фон с центром и все вещи, то вам делают background-image, background-repeat и все такое. Это в основном делает то же самое, что и фон:. Удалите один из них, и я думаю, что он работает нормально.

Working Jsfiddle here

.bg { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-image: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) ; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 

}