Is there a way to make a background image that's exclusively to Safari?

Question

My Tumblr blog is now using a background image with background-attachment:fixed
It works perfectly on Windows and Android
However, according to caniuse.com (link to article) this property works for every browser except for Safari, it zoomed in and blurry.
Is there any way I can make the background exclusive to Safari?
If not, how can I use the property background-color:black as an alternative if the exclusive image cannot be used?
Thank you!

Answer 1

You can use a library like Modernizr. https://modernizr.com/

Once loaded this will add classnames to your html you can then use this to target specific css in your markup.

However Modernizr is a big library if this is all you are doing. I always preferred this library which is much much smaller:

https://rafael.adm.br/css_browser_selector/

With this you can then target browsers specifically using css, for example.

h2 {
   background-color: red;
}

.safari h2 {
   background-color: orage;
}

.ie h2 {
   background-color: yellow;
}

There are lots of examples on that page. You can combine and nest and also target specific versions as well as operating systems.

Alternatively you could also relatively easily roll your own function:

function detectUserAgent() {
    var str = '';
    if ((navigator.userAgent.indexOf('Opera') || navigator.userAgent.indexOf('OPR')) != -1) {
        str = 'opera';
    } else if (navigator.userAgent.indexOf('Edg') != -1) {
        str = 'edge';
    } else if (navigator.userAgent.indexOf('Chrome') != -1) {
        str = 'chrome';
    } else if (navigator.userAgent.indexOf('Safari') != -1) {
        str = 'safari';
    } else if (navigator.userAgent.indexOf('Firefox') != -1) {
        str = 'firefox';
    } else if (navigator.userAgent.indexOf('MSIE') != -1 || !!document.documentMode == true) {
        //IF IE > 10
        str = 'ie';
    } else {
        str = 'unknown';
    }
    return str;
}

document.querySelector('html').classList.add(detectUserAgent());

I would say though, however that I would be pretty certain you can achieve what you want using css and not have to write a hack or fallback just for Safari.