Как да направите така, че заглавката да съвпадне с прозореца на екрана? - html, css

Това, което имам, е заглавието и фоновото изображение на тази глава.

Ето моя код:

header{
background-image: url(/img/ffHeader.png);
width: 100%;
height: 0;
padding: 0 0 15%;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
}

С горния код получавам свиването на изображениетоавтоматично според размера на прозореца, но не мога да получа заглавката. Изглежда същото, което трябва да направя, че заглавката също трябва да се увеличава и намалява според размера на прозореца. Опитах се да дам 100% височина, но тя не работи, за да получа моята заглавка до около 100px.

Размерът на заглавката трябва също да бъде променен според размера на прозореца? Как мога да получа това?

Опитвам се да добавя меню в заглавието ми код е по-долу

<header>
<button id="login">Login</button>
<nav>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#myleague">MY LEAGUES</a></li>
<li><a href="#myscore">MY SCORES</a></li>
<li><a href="#leaderboard">LEADERBOARD</a></li>
<li><a href="#howtoplay">HOW TO PLAY</a></li>
<li><a href="#about">RULES</a></li>
<li><a href="#about">FAQ</a></li>
<li><a href="#about">SUPPORT</a></li>
</ul>
</nav>
</header>

nav ul{
list-style: none;
}
nav ul li{
margin: 0 auto;
float: left;
padding-top: 7%;
}

Горепосоченият код ме кара да стигна до само 5 пиксела над края на изображението, но не се преоразмерява с заглавката. Какъв може да бъде проблемът?

Отговори:

2 за отговор № 1

Вие ще трябва да замените височината с дъното за запълване, за да отговорите на височината на ширината на страницата.

header{
background-image: url(/img/ffHeader.png);
width: 100%;
height: 0;
padding: 0 0 40%;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
}

---

1 за отговор № 2

Трябва да промените структурата на HTML и CSS

<div class="header_box">
<div class="header">
</div>
</div>


.header_box{

background-image: url(/img/ffHeader.png);
width: 100%;
min-height: 200px;
}


.header
{
height: auto;
width:80%;
padding: 0;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;

}

---

0 за отговор № 3

Можете да опитате това

<style>
.header{
width: 100%;
height: auto;
padding: 0;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}

.header_image{
height: 100%;
width: 100%;
}
</style>

<div class="header">
<img src = "/img/ffHeader.png" class="header_image" />
</div>

---

0 за отговор № 4

можете да направите това с функцията jquery и resize

като този:

var width=window.innerWidth;
function resiz_header_height(){
var height = (window.innerWidth * 200) / width;
$(".header").css("min-height", height + "px");
}
$(document).ready(function(){
resiz_header_height();
$(window).resize(resiz_header_height);
});

---