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

Asked

Viewed 764 times

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');


}
css

  • Already confirmed the path to the image ? Remember that the path starts in the folder where the file is css

  • For starters, there’s structural error in the { } (the @media does not close)- it would be good to fix the indentation, click [Edit] and post the code without syntax errors - and test out the @media or ensure that you are testing with less than 700px - Swapping the image for an existing placeholder is good to confirm if the problem is the way as mentioned by @Isac

1 answer

0


In addition to the bug that Bacco spoke of its @media rule not being closed with the latter } and the way I suppose is right, I believe that the position: absolute in the <header> is also playing a trick on you.

Like your <section> has no set height and the element that is above it has position absolute your section ends up getting behind that element and you do not fill. Your section is getting covered up by header, but the image is actually there...

See that I just removed the position: absolute of header and the image is already appearing, because now is no longer behind the header. If you don’t resolve tell me that then I withdraw 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>

  • In fact the position: Absolute was preventing Ction with the img from appearing... I think that’s what I was looking for thanks to all...

  • @Jefersonmarcelino glad it worked out! If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

  • Oops sorry!!! Done.

Browser other questions tagged css

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