Background image-media query

Hello, Please how can i make my body change background image with media query?

Can you show us what you have tried so far?

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

body {
  min-height: 100vh;
  background: url(166305.jpg)no-repeat;
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 500px) {
  body {
    background-image: url(wallpaperflare.com_wallpaper.jpg)no-repeat;
    background-size: cover;
    background-position: center;
}
}

But it keeps showing the first one no matter how i change the size of my screen.

I’m guessing because you can’t add no-repeat to the background-image property. I’m assuming you wanted it to be background instead?

I used “no-repeat” to stop the picture from repeat itself.

Right, but you can’t use it with the background-image property. You can use it with the background property, which is what I think you want.

Thanks a lot , you corrected the mistake i kept making.