Можно ли изменить background-image через медиа запрос?

Question

[4mn13y]

В версии для десктопа указал картинку через бэкграунд, при уменьшении экрана надо, чтобы картинка менялась на другую. Например:

header {
  position: relative;
  background-image: url("/img/banner-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #000000;
  z-index: 0;
}

@media (max-width: 1200px) {
  header {
    position: relative;
    background-image: url("/img/last-post2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #000000;
    z-index: 0;
  }
}

Comments

[Антон Антон]

Не знаю, как остальные, но лично я не против

[Сергей delphinpro]

Не нужно повторять в медиа-запросе свойства, которые вы не меняете.

Answer 1

[Сергей delphinpro]

А чем, по-вашему, свойство baсkground-image отличается от всех других?

.block {
  background-image: url('image.jpg');
}
@media (max-width: 700px) {
  .block {
    background-image: url('image-small.jpg');
  }
}