Фоновое изображение не отображается на мобильной странице

Question

Я пытаюсь показать различные фоновые изображения, основанные на размере экрана. Что мой CSS имеет это:

@media only screen and (min-width : 320px) { body{background: url(../images/background/background_320.png) no-repeat ;} } 
@media only screen and (min-width : 768px) { body{background: url(../images/background/background_768.png) no-repeat ;} } 
@media only screen and (min-width : 1200px) { body{background: url(../images/background/background_1200.png) no-repeat ;} } 

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

Answer 1

Попробуйте?

body{ 
    background: url(../images/background/background_320.png) no-repeat ; 
} 

@media only screen and (min-width : 768px) and (max-width : 1199px) { 
    body{ background-image: url(../images/background/background_768.png);} 
} 

@media only screen and (min-width : 1200px) { 
    body{ background-image: url(../images/background/background_1200.png);} 
} 

Поскольку вы только собираетесь быть изменение фонового изображения, а не no-repeat декларацию, мы можем взять его с медиазапросы для более чистого кода.