Как сделать фоновое изображение (CSS) адаптивным?

Question

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

header.masthead {
  text-align: center;
  color: white;
  background-image: url("../img/image.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

и хотел бы сделать его отзывчивым (оптимизированным для мобильных устройств). Я нашел одну вещь, которая работала, но она испортила работу на рабочем столе (я пытался использовать теги @media, чтобы указатьразрешение, но оно ничего не сделало).

Любая помощь?

Редактировать: Вы можете просмотреть репозиторий GitHub на https://github.com/t0091/t0091.github.io/tree/master/home.

Answer 1

Поскольку вы сохранили свое изображение в качестве фона с помощью css, то нет никакого способа применить к нему какой-либо отзывчивый класс начальной загрузки.

То, что вы можете сделать, - это иметь многократное разрешение фонового изображения и поместить небольшоеRes изображение в медиа-запросе, как это:

@media screen and (max-width: 800px) {
header.masthead {
    text-align: center;
    color: white;
    width: 100%;
    position: relative;
    background: url("smallresimage.png") center center no-repeat; /*put small res image here*/
    background-size: cover;
    background-attachment: scroll;
}

Answer 2

использование

@media only screen and (max-width: 1000px) {

}

и поместите туда только свои мобильные устройства или переключите его на минимальную ширину: 1000 пикселей и поместите туда свой мобильный NON.