Медиа-запрос div background image change weirdness

Question

У меня есть div с простым фоновым изображением. Мне нужно изменить изображение и его отображение для реагирования, однако я вижу какое-то странное поведение, когда я изменяю размер браузера, обложка либо сначала не отображается, либо отображается в кусках, когда я изменяю размер еще раз если это всего лишь одно изменение пикселя, оно начинает показываться. Обновление браузера любого размера работает просто отлично. Любая идея, почему это происходит и как ее исправить?

.mydiv { 
    background: url(../img/background1.jpg) no-repeat; 
    background-position: center center; 
} 

@media (max-width:992px) { 
    .mydiv { 
    background: url(../img/background2.jpg) no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size: cover; 
    } 
} 

Edit: Я заметил, что когда я инспектировать элемент и прикосновение .mydiv странность уходит, так что я интересно, если есть способ получить Javascript или JQuery, чтобы обновить свой элемент или что-то подобное.

Answer 1

Я вижу несколько вещей сразу же:

1. Добавить пробел между @media и (max-width:992px)
2. Вы используете mydiv элемент, или это должно быть имя класса или ID? Если это класс или идентификатор, вам нужно ссылаться на него как .mydiv (класс) или #mydiv (ID) в вашем CSS.

Here's a working jsfiddle.

Answer 2

правильно Перепишите медиа-запрос, добавив пробел и если вы хотите получить дополнительную ясность использования @media, которая сама по себе это impliciting определение @media все, но вы также можете использовать параметр, но тогда вам необходимо добавить

Я использую 768px только для целей тестирования в этом случае. Обновите его со значением, которое вам нужно.

 @media screen and (max-width: 768px) { 

     } 

DEMO КОД

html,body{ 
    height:100%; 
} 
.mydiv { 
    width:100%; 
    height:100%; 
    background: url('http://placehold.it/1000x1000/FFF/000') no-repeat; 
    background-size:cover; 
    background-position: center center; 
} 

@media (max-width: 768px) { 
    .mydiv { 
    background: url(http://placehold.it/1000x1000/) no-repeat; 
    background-position: center center; 
    } 
} 

Проверить это демо:

https://jsfiddle.net/a_incarnati/v575uvyb/5/