Блог

HTML

 <div id="header">
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photography</h2>
</div>
  

Css

 #header {
 width: 100%;
 height: 100%;
 max-width: 1024px;
 max-height: 191px;
 background-image: url(../images/Header.jpeg);
 background-size: 100% 100%;
 background-repeat: no-repeat;  
}  

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}

#header h1, #header h2{
 text-align:center;
}
  

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

любая помощь была бы отличной, спасибо

Нужно ли поддерживать соотношение сторон?

Если да, то установите background как

 #header {
  background: url(../images/Header.jpeg) center center;
  background-size: cover;
  background-repeat: no-repeat;
}
  

При этом будет сохранено соотношение сторон, изображение будет масштабироваться как по вертикали, так и по горизонтали, хотя изображение будет обрезано, если размеры видового экрана не соответствуют размерам фонового изображения