Usar Imagens de fundo diferentes no HTML+CSS

Question

Olá, tenho uma pagina em HTML+CSS e queria colocar Duas imagens diferentes de fundo, Uma pra ser exibida para PC e outra para mobile, como poderia fazer isso? Meu css está assim atualmente, chamando apenas uma imagem (BG.png)
    body{
  font-family: 'Noto Sans TC', sans-serif;
  height: 100vh;
  background-image: url(bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #007ec7;
}

Ricardo Pontual · Answer

Para fazer isso você pode usar Media Queries, que te permitem aplicar um estilo de acordo com alguns seletores de media, no seu caso, o tamanho da resolução, o que vai te diferenciar de desktop/mobile, por exemplo assim:
/* tamanho até 768px */
@media (max-width:768px) {
    body {
     background-image: url(bg-mobile.png); 
    }
}

/* tamanhos maiores que 768px */
@media (min-width:769px) {
   body {
     background-image: url(bg-desktop.png); 
   }
}

Usar Imagens de fundo diferentes no HTML+CSS

One Answer

Add your own answers!

Ask a Question