Use different Background Images in HTML+CSS

Asked

Viewed 25 times

1

Hello, I have a page in HTML+CSS and wanted to put Two different images background, One to be displayed for PC and one for mobile, how could I do that? My css is like this currently, calling just an image (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;
}
html css

1 answer

0


To do this you can use Media Queries, that allow you to apply a style according to some media selectors, in your case, the resolution size, which will differentiate you from desktop/mobile, for example so:

/* 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); 
   }
}

  • thanks, I’ll do it here, thank you very much ;)

Browser other questions tagged html css

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