Como trocar o background por img em vez de color

Home Fóruns JavaScript Como trocar o background por img em vez de color

Marcado: 

Visualizando 6 respostas da discussão
  • Autor
    Posts
    • #61652
      magnilson moreira
      Participante

      Ola amigos do curso estou na aula 12 do JS e fazendo os exercicios do site que troca a imagem da div e o a cor do fundo, eu nao estou conseguindo trocar a o fundo do body por imagem pelo Js, alguem sabe como me ajudar?

    • #61668
      IcaroFilho
      Moderador

      Boa noite amigo,
      Manda o seu codigo css pra dar uma olhada.

    • #61683
      Tutora Mayla
      Mestre

      Magnilson, poderia por favor nos enviar seu código JS e o CSS para que possamos entender melhor o que está acontecendo.

    • #61775
      magnilson moreira
      Participante

      function load(){
      var msg= document.getElementById(‘msg’)
      var img= document.getElementById(‘sol’)
      var data= new Date()
      var hour=data.getHours()
      var min=data.getMinutes()
      var seg=data.getSeconds()
      var back= document.getElementsByTagName(‘body’)[0]
      msg.innerHTML=Now it's ${hour}:${min}:${seg}
      if (hour>=0 && hour<=12){
      msg.innerHTML += ‘<br>Good Morning!’
      img.src=’img/manha.jpg’
      back.style.background= ‘#59A5D8’
      } else if (hour>= 12 && hour <18){
      msg.innerHTML += ‘<br>Good Afternoon!’
      img.src=’img/tarde.jpg’
      back.style.background= ‘#E0DFAB’
      } else {
      msg.innerHTML += ‘<br>Good Evening’
      img.src=’img/noite.jpg’
      back.style.background = ‘#0062C8’
      }

      }

      CSS

      body {
      background: rgb(54, 175, 245);
      font: normal 15pt Arial;
      }
      header {
      color: whitesmoke;
      text-align: center;
      }

      section {
      background-color: white;
      border-radius: 15px;
      padding: 20px;
      width: 800px;
      margin: auto;
      box-shadow: 3px 3px 7px rgb(15, 15, 15);
      text-align: center;

      }

      div#foto{
      padding: 15px;
      }

      footer {
      color: whitesmoke;
      text-align: center;
      font-style: italic;
      }

    • #61867
      Tutora Mayla
      Mestre

      Magnilson, pelo o que o exercício propõe o seu código está correto.
      Caso sua vontade seja fazer além, para trocar o fundo do body por uma imagem no lugar de uma cor, pode-se fazer o seguinte back.background = 'url(endereço-da-imagem.jpg)';. Este código diz para o navegador buscar a imagem que está no endereço inserido para desenhar o fundo do elemento.
      Espero ter ajudado, quaisquer outras dúvidas estamos a disposição.

    • #61930
      magnilson moreira
      Participante

      Tutora Mayla, esse comando nao deu certo nao o VSCode ta dizendo que ta fora de uso o ‘background’

      Mas eu consegui achar no W3school o codigo correto para essa finalidade que eu queria:

      object.style.backgroundImage= "url('img/image.png')"

      da primeira vez que tentei sozinho nao consegui ahcar nem no MDN mas hoje foi. muito obrigado toda ajuda

    • #62003
      Tutora Mayla
      Mestre

      Magnilson, obrigada por compartilhar essa informação!

Visualizando 6 respostas da discussão
  • Você deve fazer login para responder a este tópico.