#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