Изменение фонового изображения через @Media screen

#html #css #responsive-design #media-queries

#HTML #css #адаптивный дизайн #медиа-запросы

Вопрос:

итак, я пытаюсь изменить фоновое изображение при использовании телефона вместо браузера. Фон написан в стиле.Файл CSS, но, видимо, я делаю что-то неправильно, потому что это не изменит изображение, несмотря ни на что.

Вот мой CSS-код.

 body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  background:#040404 url("../img/Backgroundv.1.png") top right no-repeat;
  background-size: cover;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: -1;
}
@media screen and (max-width: 480px)
{
  body {
    content: "";
    position: fixed;
    background:#040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
  }
}
  

Мы высоко ценим любые советы или ответы.

Ответ №1:

Небольшая ошибка. Изменение

     body {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }
  

Для:

     body::before {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }
  

Вы применяли CSS к тегу body вместо псевдоэлемента

Комментарии:

1. Я ненавижу программирование. Исправлена моя проблема! Большое вам спасибо!

Ответ №2:

Вы используете изображение в селекторе body::before
Измените body в медиа-запросе на body::before