[Resolved] How to set background image to retina?

Home Forums Support How to set background image to retina?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1169892
    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!

    #1170102
    David
    Staff
    Customer Support

    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')
        }
    
    }
    #1171086
    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;
    }
    #1171253
    David
    Staff
    Customer Support

    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 */
    }
    #1171273
    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)

    #1171390
    David
    Staff
    Customer Support

    Made a slight adjustment to the code here

    #1171398
    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.

    #1171614
    David
    Staff
    Customer Support

    Made a slight adjustment to the code

    #1171619
    Matthias

    Thank you so much! Works fine! 🙂

    #1171679
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.