Переопределение изображений в html / css

Question

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

Для представления на рабочем столе следующий HTML / CSS-код работает отлично:

HTML:

<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

CSS:

div.et_pb_section.et_pb_section_0 {
    background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg)!important;
}

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

@media only screen and (max-width: 767px)
{
.demo-request-backgroundimage
{
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}

Answer 1

попробуйте с несколькими именами классов

Один класс для обычного CSS и другой для медиазапросов

Answer 2

Это потому, что вы используете больше специфичности вне медиа-запроса.Попробуйте:

@media only screen and (max-width: 767px) {
    div.et_pb_section.et_pb_section_0 {
        background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
     }
}

Answer 3

вы хотите изменить .et_pb_section.et_pb_section_0 img, поэтому в media-query используйте:
см. JsFiddle: https: https://jsfiddle.net/smuf3c3t/

.et_pb_section.et_pb_section_0 {
    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)!important;
    width:500px;
    height:500px;
}




@media only screen and (max-width: 767px)
{
.et_pb_section.et_pb_section_0
{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}

<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

РЕДАКТИРОВАТЬ КОММЕНТАРИЙ С ВАШЕГО САЙТА:

посмотрите, что произошло, когда я изменил размер:

ТАК удалить !IMPORTANT

Answer 4

@media only screen and (max-width: 767px)
{
    div.demo-request-backgroundimage
    {
        background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
        background-size: cover;
        background-repeat: no-repeat;
    }
}