Background image-media query

HTML-CSS
1

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

2

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.

3 
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.

4

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?

5

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

6

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.

7

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

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.