Header with bg responsive

Question

Header with bg responsive

Navigation

#1 by (1 votes)

1

I'm starting a project now and I want to leave the header responsive, but I can not. The header has an effect in js that changes the images to each refresh, but I can not assign the correct height to be responsive, it only works in px, and px is not responsive (I do not want media, please), any other data which I put does not work, it follows:

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;
}

You can not see the images because they are in my localhost, but you can get the idea of what I want) Link CodePen: link

css header responsivo background-image

asked by anonymous 30.01.2018 / 19:10

1 answer

Effect with js and svg only works in the first class in the second effect does not apply How to enable a button, only when you accept the terms

score 1 · Accepted Answer

I made some minor changes to the CSS of html,body and <header> and here BG was responsive with height in% everything right. Take a look to see if it works there.

If you do not determine a height in % for <html> and <body> you will not be able to use height in % in their children. (unless you remove <!DOCTYPE html> do not recommend this!)

Where you declared the height as auto height:auto; you have to height:100%; Thus:

html{
    width: 100%;
    height: 100%;  /* altura em % no "pai" não use auto */
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;  /* altura em % no "pai" não use auto */
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

I tested Chrome, FireFox, and IE and it did not matter. See the Snippet below

html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    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: 50%; 
    background-color: #D9D625FF;
    background-repeat: no-repeat;
    background-image: url(http://placecage.com/1350/650);
    background-position: top center;
    background-size: cover;
    overflow: hidden;
}

#empresa {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #1981CD;
    margin: 0;
    padding: 0;
}

    <header>

    </header>
    <section id="empresa">

    </section>

Readaboutthe"Bug" link