Покажите другое изображение для мобильного телефона, используя css

Question

.bg-img-1 {
  background: url("../images/bg-img-01.jpg"); 
}

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

Answer 1

вы можете использовать носитель и в другом размере просмотреть другое изображение

  @media screen and (max-width: 940px) {
.bg-img-1 {
  background: url("another image"); 
}
}

Answer 2

Вы можете использовать медиазапросы в своем css:

// изображении по умолчанию

.bg-img-1 {
  background: url("../images/bg-img-01.jpg"); 
}

// для планшетов и выше

@media screen and (max-width: 768px){
  .bg-img-1 {
     background: url("../images/bg-img-01-tablet.jpg"); 
  }
}

вы можете использовать несколько медиазапросов для разных разрешений экрана.

Answer 3

Вам необходимо использовать медиа-запросы:)

Для компьютерных запросов вы используете одно изображение, а для мобильных запросов - другое изображение :) Проверьте W3 C, оно может вам помочь:)