Estou iniciando um projeto agora e quero deixar o header responsivo, mas não consigo. O header tem um efeito em js que muda as imagens a cada refresh, mas não consigo atribuir o height correto pra ficar responsivo, só funciona em px, e em px não fica responsivo (Não quero media querie, por favor), qualquer outro dado que coloco não dá certo, segue:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="pt-br">
<meta charset="UTF-8">
<title>MMCCPCS</title>
<!-- Estilização -->
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<!--Animate CSS-->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<header>
</header>
<section id="empresa">
</section>
<script type="text/javascript">
function randFundo(){
var fundo = [1,2,3,4,5][Math.floor(Math.random()*4)];
!localStorage.fundo ? localStorage.fundo = fundo : 0;
return localStorage.fundo == fundo
?
(localStorage.fundo = fundo+1)
:
(localStorage.fundo = fundo);
}
var e_header = document.querySelector("header");
e_header.style.backgroundImage = "url(imagens/fundo"+randFundo()+".jpg)";
</script>
</body>
</html>
CSS
html{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: auto;
overflow-y: scroll;
overflow-x: hidden;
margin: 0;
padding: 0;
}
header {
position: relative;
display: block;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 650px; /* Aqui está o erro, se coloco em % não dá certo e em px não fica responsivo */
background-color: #D9D625FF;
background-repeat: no-repeat;
}
#empresa {
position: relative;
width: 100%;
height: 300px;
background-color: #1981CD;
margin: 0;
padding: 0;
}
Não dá pra ver as imagens pq estao em meu localhost, mas dá pra ter a noção do que eu quero) Link CodePen: https://codepen.io/clayton2018/pen/WMbzNd