CSS: фоновое изображение не масштабируется на мобильном

Question

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

Я пытался изменить размер со 100%, auto и cover, играл с vw и vh и т. Д., но до сих пор не могу заставить что-либо работать.

Вот CSS:

.intro {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(../img/intro-bg.jpg) no-repeat center top;    
  background-color: #e5e5e5;    
  -webkit-background-size: cover;    
  -moz-background-size: cover;    
  background-size: auto;    
  -o-background-size: auto;    
} 

Если кто-то может помочь, это было бы здорово!сайт adammillsmusic.com

Спасибо!

Answer 1

Спасибо за вашу помощь - это действительно решило проблему.Хотя теперь, увидев результат, я думаю, что было бы разумнее назвать изображение меньшего размера с помощью «@media» для мобильного сайта.Единственная проблема в редакторе кода, когда я пытаюсь это сделать, он, похоже, не распознает тег @media и воспринимает его как / * * / Какие-нибудь мысли ?!Спасибо

@media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}

Answer 2

Для адаптивных изображений выполните следующие действия в классе .intro

intro {
    max-width: 100%;
    height: auto;
    display:block;
    padding: 0;
    text-align: center;
    color: #333;
    background: url(../img/intro-bg.jpg) no-repeat center top;
    background-color: #e5e5e5;
    background-size: contain;
    -webkit-background-size: contain
}

Ключевые изменения

max-width: 100%;
height: auto;
display:block;

Надеюсь, это поможет

Answer 3

Установите max-width на 100%, как это:

max-width: 100%;

Answer 4

Вы ставите свойства перед разными значениями:

• -webkit-background-size: cover;: на веб-наборе (Chrome & co) покройте фон
• background-size: auto; В других браузерах не включайте

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

body {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(//placecage.com/200/200) no-repeat center top;    
  background-color: #e5e5e5;    
  background-size: cover;     
}