Фоновое изображение, получаемое в Chrome/Safari

Question

У меня есть div с фоном, установленным для обложки. Я устанавливаю размер контейнера изображений на 100 пикселей больше, чем окно со всех сторон. Затем я tweenlite для перемещения фона на основе мыши.

Отлично работает в FF. Не так много в Chrome/Safari. Фоновое изображение выглядит обрезанным.

Вот ссылка, которая иллюстрирует мой вопрос: http://codepen.io/iknowbryan/pen/xENgrX

.bg{ 
    background: url(https://unsplash.it/1800/1100/?random) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: absolute; 
    top: -100px; 
    left: -100px; 
    bottom: -100px; 
    right: -100px; 
} 

Любые идеи ?!

Answer 1

Вы устанавливаете на задний план, удалите его.

background: url(https://unsplash.it/1800/1100/?random) no-repeat center; 

Answer 2

Прорыв фоне. Иногда определение фона может быть «чувственным».

.bg{ 
    background-image: url(https://unsplash.it/1800/1100/?random); 
    background-position: center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
    position: absolute; 
    top: -100px; 
    left: -100px; 
    bottom: -100px; 
    right: -100px; 
}