How to set background image to retina?

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')
    }

}

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;
}

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 */
}

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)

Made a slight adjustment to the code here

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.

Made a slight adjustment to the code

Thank you so much! Works fine! :)

You're welcome