Фон исчезает с любой дополнительной позицией, размером и т. Д. c кодом, но виден без

Question

Я использую следующий код для изображения заголовка (оно меняется на другое изображение на мобильном телефоне, что может быть основной проблемой)

@media screen and (min-width: 600px) {
.header-background {
    width:100%;
    height:100vh;
    background-color:#000000;
    background:url(http://matsushiro.org/new/tunnel-header3.png);
}
}

@media screen and (max-width: 600px) {
.header-background {
    width:100%;
    height:100vh;
    background-color:#000000;
    background:url(http://matsushiro.org/new/tunnel-header-mobile.png);
}

}

Код для div, используемого в качестве заголовка, и, если возможно, я хочу, чтобы он занимал весь видовой экран. Проблема в том, что на данный момент изображение действительно велико (см. Здесь на рабочем столе: http://matsushiro.org/new/). Поэтому я пытаюсь изменить его размер с помощью «содержать» (или любого другого метода, это на самом деле не имеет значения), но всякий раз, когда я вообще что-то изменяю - фон, размер, положение и т. Д. c, соответствует ли оно background: url line или отдельно как background-size: фон полностью исчезает.

Answer 1

Отредактировано:

Поскольку ваши атрибуты класса одинаковы, вы можете изменить свой css на:

.header-background {
  width: 100%;
  height: 100vh;
  background-color: #000000;
  background-image: url(http://matsushiro.org/new/tunnel-header3.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  @media screen and (max-width: 600px) {
    background-image: url(http://matsushiro.org/new/tunnel-header-mobile.png);
  }
}

Кроме того: вы можете оптимизировать гораздо больше, чем PNG-изображения, просто экспортируя как png-8 16 цветов в фотошопе.

Веселись!

Answer 2

добавьте эту строку в css

background-size: cover;

Я попробовал ее на вашем сайте в консоли chrome, и фон не исчез. попробуйте перезагрузить с ctrl+f5 возможно это может помочь вам