I have a site and the background images are pretty much as I want them on mobile, but when it comes to desktop, I can't seem to use an @media query to modify them. 

My css is:

```
body.page-id-6166 { 
  background-image: url(https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png);    
  background-repeat: repeat;
  background-size: cover;
}

```

That covers mobile and desktop obviously, and works

But when I try:

```
@media (max-width: 1920px) and (min-width: 768px) {
  body.page-id-6166 { 
    background-image: url(https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png);  
    background-repeat: repeat;
  }
}

```

Nothing happens. 

Even tried it with `important` which it didn't like at all.

To clarify futher. They are the same image, but one (desktop) you can only see part of it because of landscape/portrait etc and because it gets automatically enlarged in desktop for some reason. So on mobile, original image (the whole thing) x 2.In desktop, you only see one image and only a part of that one image. So that's why i want that @media query. You can see an example in <https://adsler.co.uk/dating/> or <https://adsler.co.uk/jobs/> It's the same image but desktop only selects part of it and seems to blow it up.