Header with responsive bg

Asked

Viewed 380 times

1

I’m starting a project right now and I want to make the header responsive, but I can’t. The header has an effect in js that changes the images every refresh, but I can’t assign the correct height to be responsive, only works in px, and px is not responsive (I don’t want media querie, please), any other data I put does not work, 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’t see the images because they are on my localhost, but you can see what I want) Link Codepen: https://codepen.io/clayton2018/pen/WMbzNd

css header responsive background-image

  • From what I understand every image you will call in Header has a different height, but you want them all to appear at the same height is this?

  • No, all images are 1350 x 600, I just want the header to be responsive, at each width of the browser it fits with the image. If I put in pixel in browsers smaller than 1350 appears the yellow background, because the height is 610px, needed to be in percentage, but if put gives error and does not appear the header.

1 answer

1


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

If you don’t determine a time at % to the <html> and the <body> you won’t be able to use height in % in their children. (unless you remove the <!DOCTYPE html> do not recommend this!)

And where you declared height as self height:auto; you have to put 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 in Chrome, Firefox and IE and was no problem. See in 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>

inserir a descrição da imagem aqui

Read about the "Bug" https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this

  • Thanks, it worked out and I haven’t. It was responsive, but I need to determine the exact time to finish the header, in case the height of the images, which is 600px, otherwise the company Section is not in the correct place that would be just below the header. See https://prnt.sc/i8qcd1 and http://prntscr.com/i8qeao

  • If I put height: auto or 600px ceases to be responsive, and if put in % is not good.

  • 1

    I guess unfortunately without @media you won’t be able to handle it. You can try putting this at the height of the Header, but I don’t know if it will look the way you want it... min-height: 600px; height: 50%; So the minimum height is 600px, but when the screen is larger the Header is also, but never less than 600px high.

  • It’s with min-height can work, I’ll do some tests here and put what gave, vlw for help

Browser other questions tagged css header responsive background-image

You are not signed in. Login or sign up in order to post.