[Resolved] How to set background image to retina?

[Matthias]

Hey there!

The website container width is set to 1100px.

I have two background images available:

website-background-noretina-tinyfied.jpg (1100px width)
website-background-retina-tinyfied.jpg (2200px width)

It would be cool if it’s possible to set in theme backend a normal background and a retina one. Is this possible or will this a feature in upcoming theme versions?

Anyway, how is it possible to make it happen via CSS? (using the 2200px width image)

Many thanks!

[David]

Hi there,

interesting idea – its the first time i have seen it requested. We are quite reserved when it comings to adding more features to the customizer in pursuit of maintaining a lightweight theme. But we’ll keep it in mind 🙂

Try this CSS:

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

    body {
        background-image: url('full_url_to/retina_image_url.jpg')
    }

}

[Matthias]

Hey David,

thank you for your support! 🙂

I tried with following CSS code, but I see that on mobile devices the width is still not 1100px (image is as said 2200px) and it would be cool if on mobile devices the background image will shown too “top center position” like on desktop. Is this possible?

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

    body {
        background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-retina-			tinyfied.jpg')
    }

}

button.menu-toggle {
    font-size: 20px; /* 20px */
}

body {
    position: relative;
}

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-noretina-			tinyfied.jpg');
    z-index: -1;
	  background-repeat: no-repeat;
	  background-position: top center;
}

[David]

The @media query is working but the your background images are broken … theres an additional space in the file name before the tinyfied….

And your CSS needs to be like this:

/* Add pseudo fixed background */

body {
    position: relative;
}

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
    z-index: -1;
    background-repeat: no-repeat;
    background-position: top center;

}

/* swap psuedo fixed background image on 2x devices */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

    body:before {
        background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
        background-size: cover;
    }

}

/* Other CSS */

button.menu-toggle {
    font-size: 20px;
    /* 20px */
}

[Matthias]

Thanks, David!

In WP customizer backend the background image works fine and smooth (showing in tablet and mobile mode).

But on my iPad and iPhone I can’t see any background images at all.

(All caching stuff is still off)

[David]

Made a slight adjustment to the code here

[Matthias]

Now with iOS devices it works fine.

But it looks like the additional code

background-size: cover;

now breaks “background-position: top center;” for desktop.

[David]

Made a slight adjustment to the code

[Matthias]

Thank you so much! Works fine! 🙂

[David]

You’re welcome

[Author]

Posts