Background image to change with media query

Support
#1

On a number of X or Pro sites that I have built, I have used a background image which was set in the Customizer. I used an image 1600px wide and all worked well.

However, I am now looking to optimise my sites’ loading times and wondering if there is any way in which the background image can be varied with viewport width.

I have done this successfully on a “section” level within a page layout where background-image can be styled in CSS differently for each viewport size using simple media queries. Is there any way of doing this on a site-wide level, or even at page level?

Kindest regards,

Doug

#2

Hi there,

Yes, that is possible to do so but we will need to have an access to the website to see how you added the background image so that we can give you proper CSS code.

kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Please consider that the @media Queries only possible if the result of the setting in the front end of the page is using CSS backgrounds. But if there is an img tag added to the website and it is stretched out, then it is not possible to change that using the simple @media queries of CSS. So it is totally depending on how you set the image and we can find that by checking the URL of your website in question.

Thank you.

#3

Thanks.

The background image WAS added through the “Background Image” selection on the “Layout & Design” tab on the Customizer in X / Pro. Therefore it DOES appear as an img tag with the class=“backstretch” when I inspect the elements of the page.

This is the “standard” method of placing a background image in a page (sitewide) in X / Pro.

I would like like to get some advice therefore of the proper way to add a background image to pages using CSS and @media queries.

I could send URL/User/Pass, but all of the sites I’ve done are the same in this regard. I have applied the background image in the same way; and they all show up as img tag with class = “backstretch”.

Regards,

Doug

#4

Hi Doug,

If you are adding the background images using the Background Image(s), you can set the background to the body element of the page and target it through media query like this:

@media (max-width: 980px) {
    body {
        background-image: url(THE_BACKGROUND_IMAGE URL);
    }
}
@media (max-width: 979px) {
    body {
        background-image: url(THE_BACKGROUND_IMAGE URL);
    }
}

@media (max-width: 767px) {
    body {
        background-image: url(THE_BACKGROUND_IMAGE URL);
    }
}

@media (max-width: 480px) {
    body {
        background-image: url(THE_BACKGROUND_IMAGE URL);
    }
}

Hope this helps.

#5

Many thanks, Jade.

This makes perfect sense.

Doug

#6

You’re most welcome, Doug.

#7

I should just mention for anyone reading this answer later, that there’s a typo in the first line of Jade’s answer. I believe that the first line should be:

@media (min-width: 980px) {

#8

Hey there,

Yes that’s correct, thank you for the correction.

Cheers!

#9

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