Как использовать медиаэкран в начальной загрузке?

Question

Я использую фоновое изображение для панели навигации в адаптивном дизайне.

.navbar {
   background-image: url(http://www.sample.com/images/bg.png);
   background-repeat: repeat-x;

  }

Я хочу, чтобы фоновое изображение отключилось с разрешением 960 пикселей и использовал градиентный фон.

    @media (min-width: 960px) {
.navbar {
 background-image: -webkit-linear-gradient(top, #4f72a8 0%, #040aa5 100%);
 background-image: linear-gradient(to bottom, #4f72a8 0%, #040aa5 100%);
 background-repeat: repeat-x;
 filter:    progid:DXImageTransform.Microsoft.gradient
 (startColorstr='#ffffffff',   endColorstr='#ffdfdfdf', GradientType=0);
}
}

Я получаю градиент, но исходное фоновое изображение не исчезает.

Answer 1

Я думаю, что вы должны сбросить фон в начале. Это должно работать для вас.

@media (min-width: 960px) {
    .navbar {
        background-image: none;

        background-image: -webkit-linear-gradient(top, #4f72a8 0%, #040aa5 100%);
        background-image: linear-gradient(to bottom, #4f72a8 0%, #040aa5 100%);
        background-repeat: repeat-x;
        filter:    progid:DXImageTransform.Microsoft.gradient
            (startColorstr='#ffffffff',   endColorstr='#ffdfdfdf', GradientType=0);
    }
}