Using retina images for background images

moodlematts · June 2017

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 · June 2017

Here's a page as an example..

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

moodlematts · June 2017

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 · June 2017

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

thanks

Using retina images for background images

Comments

This website uses cookies