Некорректно отображается картинка в html
header {
background-image: url("media/img/1.jpg");
width: 100%;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Сайт</title>
</head>
<body>
<header>
<div>
<h1>Ecogo</h1>
<!-- <img src="media/img/1.jpg"> -->
</div>
</header>
</body>
</html>Картинка в теге html отображается корректно, но стоит мне её переместить в css и всё ломается, она отрисовывается пропорционально введённому тексту, т.е. написал слово - отобразился кусочек картинки высотой с введённое слово, написал 2 строчки - отобразился фрагмент картинки высотой с две строчки. Мне нужно сразу вывести всю картинку целиком. P.S. на форуме размещён похожий вопрос, те советы, которые там были предложены, я тоже пробовал