background-image does not work in section what to do?

1

Html:

<!DOCTYPE HTML>
 <html lang="pt-br">
<head>
    <meta charset=”UTF-8”>
       <meta name="author" content="Agencia de Marketing Digital Cmk">
       <meta name="description" content=" Agencia de Marketing digital em São Paulo CMK é uma empresa de marketing digital, que oferece serviços marketing digital para empresas." />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
       <meta name="robots" content="index, follow">
    <script src="scripts/seu-script.js"></script>

        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Pacifico' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/estyles.css">
        </head>

<body>
     <header>
     <a href="index.html" target="_self"><img src= "imagens/logo-cmk.png" alt="Agencia de Marketing Digital CMK Logotipo"></a>
        <nav>

            <li><a href="index.html" target="_self">HOME</a></li>
            <li><a href="#agencia">AGÊNCIA</a></li>
            <li><a href="#servicos">SERVIÇOS</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#contato">CONTATO</a></li>

        </nav>
    </header>

  <section class="hero">

  <h1>teste</h1>

   <a class="btn" href="#servicos" target="_self">PORTFÓLIO</a>

   </section>

</body>
</html>

===================================================== =======================

Css:

/* GERAL */

* {
   margin:0;
   padding:0;
   font-size: 100%; 
   box-sizing: bolder-box;
   font-family: "Open Sans", Helvetica, Arial, sans-serif;

} 

nav,ul{
    list-style: none;
}

a{
    text-decoration: nene;
    cursor: pointer;
}
/* FINAL GERAL */

/* HEADER */

header {

     background-color: #ffffff;
     width:100%;
     position: absolute;
     top:0;
     left: 0; 
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding:20px 50px; 

}

header img{
    width:150px;
}

header nav{
    display:flex;

}
header li a {
  color: #696969;
  text-decoration:none; 

}
header li  {
  margin: 0 15px;

}
header li: first-child {
  margin-left: 0;

}
header li: last-child {
  margin-right: 0;

}

/*
MEDIA QUERIES
*/

@media (max-width: 700px) {

    header {
    flex-direction: column;

}
    header img {
    margin-bottom: 15px;

}

/* hero section foto */

.hero {

     background-image: url('../imagens/fundo.jpg');


}
    
asked by anonymous 11.08.2018 / 18:39

1 answer

0

In addition to the error that Bacco said about his @media rule not being closed with the last } and the path I suppose is correct , I believe that position: absolute no <header> too is preaching a part to you.

Since its <section> has no height defined and the element that is above it has position absolute its section ends up being behind this element and you do not fill. Your section is getting cloaked by header , but the image is actually there ...

See that I just removed position: absolute from header and the image is already appearing, because now it is no longer behind header . If it does not solve, tell me that I remove the answer ok.

* {
   margin:0;
   padding:0;
   font-size: 100%; 
   box-sizing: bolder-box;
   font-family: "Open Sans", Helvetica, Arial, sans-serif;

} 

nav,ul{
    list-style: none;
}

a{
    text-decoration: nene;
    cursor: pointer;
}
/* FINAL GERAL */

/* HEADER */

header {

     background-color: #ffffff;
     width:100%;
     /* position: absolute; retirar position absolute*/ 
     top:0;
     left: 0; 
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding:20px 50px; 

}

header img{
    width:150px;
}

header nav{
    display:flex;

}
header li a {
  color: #696969;
  text-decoration:none; 

}
header li  {
  margin: 0 15px;

}
header li: first-child {
  margin-left: 0;

}
header li: last-child {
  margin-right: 0;

}

/*
MEDIA QUERIES
*/

@media (max-width: 700px) {

    header {
    flex-direction: column;

}
    header img {
    margin-bottom: 15px;

}

/* hero section foto */

.hero {

     background-image: url(http://unsplash.it/100/100);


}
}
     <header>
     <a href="index.html" target="_self"><img src= "imagens/logo-cmk.png" alt="Agencia de Marketing Digital CMK Logotipo"></a>
        <nav>

            <li><a href="index.html" target="_self">HOME</a></li>
            <li><a href="#agencia">AGÊNCIA</a></li>
            <li><a href="#servicos">SERVIÇOS</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#contato">CONTATO</a></li>

        </nav>
    </header>

  <section class="hero">

  <h1>teste</h1>

   <a class="btn" href="#servicos" target="_self">PORTFÓLIO</a>

   </section>
    
11.08.2018 / 20:27