Изменить фоновое изображение на мобильном телефоне

Question

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

@media (@max-width: 450px){
    .main_slider_item_bg {
        background-image:url("/images/web_phone.png")
    }

<div class="owl-item main_slider_item">
<div class="main_slider_item_bg " style="background-image:url(images/web.png)"></div>

Я пробовал это, но это не работает.

Answer 1

Ваше решение здесь:

@media (max-width: 450px){
    .main_slider_item_bg {
        background-image:url("/images/web_phone.png")
    }
}

В скобках в скобках указывается функция устройства с синтаксисом, который вы используете при объявлении свойства CSS внутри правила.