У меня есть следующие CSS:Переключение фонового изображения с помощью CSS на экране шириной

#section-one { 
    background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 


@media all and (max-width: 800px) { 
    #section-one { 
     background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg') !important; 
    } 
}

Теперь я ожидал, чтобы это изменить фоновое изображение, когда ширина браузера < = 800px

Ничто фактически не меняется, хотя , но если я щелкнул правой кнопкой мыши и просмотрел изображение, когда ширина браузера ниже 800 пикселей, это на самом деле показывает мне изображение ширины 800 пикселей?

Странно, почему это происходит и как его исправить? Вот ссылка должна вам это нужно:

http://176.67.174.179/ukcctvinstallations.co.uk

Единственный CSS У меня есть для # раздел-один у меня есть это: -

@media all and (max-width: 880px) { 
    /* Section 1 */ 
    #section-one { 
     margin-bottom: -49px !important; 
    } 
}

источник

2014-09-21 nsilva

есть что-нибудь еще контролировать его? я имею в виду, может быть, где-то в остальной части вашего кода css или на элементе напрямую вы добавили ширину к нему ... пожалуйста, включите код, добавив ссылку, возможно, не поможет другим в будущем посещать этот вопрос, поскольку ссылка может быть снята или иным образом недоступны ... – webeno

Я получаю 404, когда я обращаюсь к http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-800px.jpg. Однако реальная причина, по-видимому, не меняется, потому что у вас есть элемент , указывающий на то же изображение, что и ваше первое правило CSS, охватывающее область # section-one. – BoltClock

http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg - все тот же – nsilva

вы можете создать картину в стандартных размерах экрана как section-one.jpg (1440x900), а затем использовать этот код для #section-one:

# раздел-один {

min-width:974px; 
min-height:510px; 
background:url(section-one.jpg) no-repeat bottom center fixed transparent; 
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover; 
height:100%; 
width:100%; 
image-rendering:optimizeSpeed

}

источник

2014-09-21 13:10:52

Please try this code 

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

#section-one{ 

background: url(section-one.jpg) no-repeat center center fixed; 

-webkit-background-size: cover; 

-moz-background-size: cover; 

-o-background-size: cover; 

background-size: cover; 

width:100%; 

height:100%; 
} 
}

источник

2014-09-21 20:29:17 Deepti

Переключение фонового изображения с помощью CSS на экране шириной

ответ

# раздел-один {

}

Смежные вопросы