Entrar Ainda não tem acesso?
9
respostas

Imagem do background é adicionada em uma das paginas e em outra não

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Rodapé

por Marcelo Souza de Moraes
| 15.5k xp | 5 posts

!NESSE CSS-IMAGEM NÃO CARREGA!

body {
    height: 100%;
    width: 100%;
    background-image: url(./img/fundofooter.png);`
`
}
header {
    position: relative;
    background-color: orangered;
    padding: 15px;
    width: 100%;
    height: 66px;

}
.logo {
    display: inline-block;
    width: 150px;
    float: left;
    margin: 0 0 0 220px;
}
nav {
    display: inline-block;
    position: relative;
    left: 115px;
    top: 33px;
}
nav li {
    display: inline-block; 
    margin-left: 15px;
  }
nav a {
    text-decoration: solid;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}
nav a:hover {
    color: darkorange;
    text-decoration: underline;
}
.redes-sociais {
    display: inline-block;
    position: relative;
    top: 38px;
    left: 180px
}
.redes-sociais figure {
    display: inline-block;
    margin-right: 7px;
}
main {
     width: 100%;
    height: 90%;
    text-align: center;
    margin: 0 auto;

}

!NESSE CSS-IMAGEM CARREGA!

body {
  height: 100%;
  width: 100%;
   background-image: url(./img/fundofooter.png);
}
header {
  background-color: orangered;
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.logo-naruto {
  display: inline-block;
  padding-left: 210px;
}
.logo-naruto h1 {
  display: inline-block;
}
nav {
  display: inline-block;
  position: relative;
  left: 162px;
  top: -22px;
  margin: 0 auto;
}
nav li {
  display: inline;
  margin: 0 0 0 15px;
}
nav a {
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  text-decoration: none;
}
nav a:hover {
  color: darkorange;
  text-decoration: underline;

}
.redes-sociais {
  display: inline-block;
  position: relative;
  left: 227px;
  top: -17px;
}
.redes-sociais figure {
  display: inline-block;
  margin-right: 7px;
}
.main {
  width: 100%;
  height: 90%;
  text-align: center;
  margin: 0 auto;
}
ul {
  width: 100%;
  text-align: center;
}
.personagens {
  width: 1200px;
  margin: 0 auto;
}
.personagens li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
  width: 253px;
  padding: 15px 0;
  margin: 1%;
  border-color: #000000 ;
  border-width: 2px ;
  border-style: solid ;
  border-radius: 10px;
}
.personagens li:hover {
  border-color: darkorange;

}
.personagens li:active {
  border-color: darkorange;
}
.personagens li:hover img {
  height: 340px;
}
.personagens li:hover h2 {
  font-size: 30px;
}
.personagens h2 {
  font-size: 20px;
  font-weight: bold;
 padding: 20px;
}
.personagens p {
  padding: 10px;
}
footer {
  text-align: center;

}
9 respostas
por Marcelo Souza de Moraes
| 15.5k xp | 5 posts

HTML DO CODIGO QUE ADICIONA A IMAGEM :

<body>
    <header>
        <div class="logo-naruto">
            <h1> <img src="./img/Naruto2.png" height="93px" alt="naruto2;"></h1>
        </div>

        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="personagens.html">PERSONAGENS</a></li>
                <li><a href="https://naruto.fandom.com/pt-br/wiki/Wiki_Naruto">wiki</a></li>
            </ul>
        </nav>

        <div class="redes-sociais">
            <ul>
                <figure class="instagram">
                    <img src="./img/instagram.png" width="23px" onmouseover="this.src='./img/color-instagram.png' "
                        onmouseout="this.src='./img/instagram.png'">
                </figure>
                <figure class="facebook">
                    <img src="./img/facebook.png" width="23px" onmouseover="this.src='./img/color-facebook.png' "
                        onmouseout="this.src='./img/facebook.png'">
                </figure>
                <figure class="twitter">
                    <img src="./img/twitter.png" width="23px" onmouseover="this.src='./img/color-twitter.png' "
                        onmouseout="this.src='./img/twitter.png'">
                </figure>
                <figure class="whatsapp">
                    <img src="./img/whatsapp.png" width="23px" onmouseover="this.src='./img/color-whatsapp.png' "
                        onmouseout="this.src='./img/whatsapp.png'">
                </figure>
            </ul>
        </div>
    </header>
    <main>
        <ul class="personagens">
            <li class="naruto-personagem">
                <h2>Naruto</h2>
                <img src="./img/naruto.png" height="300px" alt="">
                <p>Aquele que carrega a Raposa</p>
            </li>
            <li class="sasuke-personagem">
                <h2>Sasuke</h2>
                <img src="./img/sasuke.png" height="300px" alt="">
                <p>O herdeiro Uchiha</p>
            </li>
            <li class="sakura-personagem">
                <h2>Sakura</h2>
                <img src="./img/sakura.png" height="300px" alt="sakura">
                <p>Kunoichi médica</p>
            </li>
            <li class="kakashi-personagem">
                <h2>Kakashi</h2>
                <img src="./img/kakashi.png" height="300px" alt="">
                <p>O ninja copiador</p>
            </li>
            <li class="jiraiya-personagem">
                <h2>Jiraiya</h2>
                <img src="./img/jiraiya.png" height="300px" alt="">
                <p>O Sábio dos sapos</p>
            </li>
            <li class="orochimaru-personagem">
                <h2>Orochimaru</h2>
                <img src="./img/orochimaru.png" height="300px" alt="">
                <p>O Mestre das cobras</p>
            </li>
            <li class="tsunade-personagem">
                <h2>Tsunade</h2>
                <img src="./img/tsunade.png.png" height="300px" alt="">
                <p>O quinto Hokage</p>
            </li>
            <li class="gaara-personagem">
                <h2>Gaara</h2>
                <img src="./img/gaara.png" height="300px" alt="">
                <p>Demonio da areia</p>
            </li>
            <li class="temari-personagem">
                <h2>Temari</h2>
                <img src="./img/temari.png" margin-leaft="10px" height="300px" alt="">
                <p>Leque da morte</p>
            </li>
            <li class="kankuro-personagem">
                <h2>Kankuro</h2>
                <img src="./img/kankuro.png" height="300px" alt="">
                <p>Mestre das marionetes</p>
            </li>
            <li class="itachi-personagem">
                <h2>Itachi</h2>
                <img src="./img/itachi.png" height="300px" alt="">
                <p>Assasino Uchiha</p>
            </li>
            <li class="kisame-personagem">
                <h2>Kisame</h2>
                <img src="./img/kisame.png" height="300px" alt="">
                <p>Espadachin da Névoa</p>
            </li>
            <li class="shikamaru-personagem">
                <h2>Shikamaru</h2>
                <img src="./img/shikamaru.png" height="300px" alt="">
                <p>Mente das sombras</p>
            </li>
            <li class="ino-personagem">
                <h2>Ino</h2>
                <img src="./img/ino.png" height="300px" alt="">
                <p>Kunoichi sensorial</p>
            </li>
        </ul>
    </main>
    <footer>
        <img src="./img/logo.png" alt="">
        <p>Copyrigth Naruto Sempre 2022</p>
    </footer>
</body>
por Marcelo Souza de Moraes
| 15.5k xp | 5 posts

HTML DO CODIGO QUE NÃO ADICIONA A IMAGEM

<body>
    <header>
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>

        <nav>
            <ul>
                <li><a href="index.html">home</a> </li>
                <li><a href="personagens.html">personagens</a></li>
                <li><a href="https://naruto.fandom.com/pt-br/wiki/Wiki_Naruto">wiki</a></li>
            </ul>
        </nav>

        <div class="redes-sociais">
            <ul>

                <figure class="instagram">
                    <img src="./img/instagram.png" width="23px" onmouseover="this.src='./img/color-instagram.png' "
                        onmouseout="this.src='./img/instagram.png'">
                </figure>
                <figure class="facebook">
                    <img src="./img/facebook.png" width="23px" onmouseover="this.src='./img/color-facebook.png' "
                        onmouseout="this.src='./img/facebook.png'">
                </figure>
                <figure class="twitter">
                    <img src="./img/twitter.png" width="23px" onmouseover="this.src='./img/color-twitter.png' "
                        onmouseout="this.src='./img/twitter.png'">
                </figure>
                <figure class="whatsapp">
                    <img src="./img/whatsapp.png" width="23px" onmouseover="this.src='./img/color-whatsapp.png' "
                        onmouseout="this.src='./img/whatsapp.png'">
                </figure>

            </ul>
        </div>
    </header>
    <main>
        <p>
            <b>Naruto</b> é um jovem órfão habitante da Vila da Folha que sonha se tornar o quinto Hokage, o
            maior
            guerreiro e
            governante da vila. ... Agora <b>Naruto</b> vai contar com a ajuda dos colegas Sakura e Sasuke e do
            professor dos
            três, Kakashi Hatake, para perseguir seu sonho e deter os ninjas que planejam fazer mal á sua
            cidade.
        </p>
        <p>
            O enredo de <b>Naruto</b> é baseado nas cinco grandes nações de Shinobis, cada vila possui um
            elemento
            da
            natureza
            para representá-lo. Cada nação possui sua escola ninja e seus treinamentos próprios.
            <br>
            <b>Naruto</b> é um estudante da vila da folha e sonha em se tornar Hokage, a autoridade máxima
            da
            vila.
            Não
            é
            exatamente o exemplo de um estudante e sua popularidade não é alta entre os moradores, colegas e
            professores.
            <br>
            Colocado no time de Sasuke e Sakura e liderado por Kakashi começa sua caminhada rumo a
            maturidade e
            superação ao longo do anime.
            <br>
            O número de personagens com seus enredos bem desenvolvidos são incontáveis e as batalhas e
            confrontos
            são
            conduzidos com emoção, sempre mostrando a história dos personagens e com mensagens importantes.
            <br>
        </p>
    </main>
    <footer>
        <footer>
            <img src="./img/logo.png" alt="">
            <p>Copyrigth Naruto Sempre 2022</p>
        </footer>
    </footer>
</body>
por guilherme.urbinatti
| 346.1k xp | 171 posts
Analista de Sistemas

Acho que sua segunda pagina. tem diferenca aqui

        <div class="logo-naruto">
            <h1> <img src="./img/Naruto2.png" height="93px" alt="naruto2;"></h1>
        </div>
por Marcelo Souza de Moraes
| 15.5k xp | 5 posts

A unica diferença era a presença de um "h1", adicionei e a imagem não foi colocada no background :/ Obrigado!

por guilherme.urbinatti
| 346.1k xp | 171 posts
Analista de Sistemas

Consegue subir a imagem da estrutura do projeto?

Para ver o que esta errado.

por Marcelo Souza de Moraes
| 15.5k xp | 5 posts

Usei o css inline para adicionar o background-image e funcionou

por guilherme.urbinatti
| 346.1k xp | 171 posts
Analista de Sistemas

Maravilha!

por Alan Tioshi Araki
| 30.5k xp | 17 posts

Acho que por conta que voce adicionou apenas "./img/" e na verdade precisa fazer com que volte a pasta de destino e para isso precisa ser "../img/", com dois pontos ("..").

por Hebert Luiz Machado Herman
| 87.6k xp | 5 posts
Analista

background: url("../img/bg.jpg");