I'm facing an issue with background images on my website. They display fine on mobile, but desktop is proving to be a challenge when attempting to use an @media query for modification.
Here's my current CSS:
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;
}
This setup works for both mobile and desktop, as expected.
However, when I introduce the following code:
@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 changes as intended.
I even attempted using important, but that didn't work either.
To provide further clarification, although both mobile and desktop versions are the same image, the desktop version only displays a portion of it due to various factors such as landscape orientation. The image also gets enlarged automatically on desktop. On mobile, the original full image is displayed at double size. This is why I need the @media query. You can see this in action on or . The image remains consistent, but on desktop, only a part is selected and appears to be magnified.