Using retina images for background images

moodlematts

Hi, I'm using retina background images placed in the Muffin Builder selection.

Here's my custom CSS which is working for Chrome on both retina and non retina monitors..

@media

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

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

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

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

only screen and (                min-resolution: 72dpi),

only screen and (                min-resolution: 2dppx) { 

.breakout {

        background-size: 1501px 516px!important;

    }

}

My question is this does not work for non retina monitors using safari? can you help? thanks.

moodlematts

Here's a page as an example..

https://new.next.moodle.com/?page_id=397

moodlematts

I've found a work around but would prefer to a simplified method if possible using Muffin builder rather than custom CSS for every page background image.

Bryan

Sorry but we do not have an option for  retina background images in our theme. Your workaround would have to work.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next