CSS: A background-blend-mode fallback for iPhone Safari

Question

I'm susccesfully using background-blend-mode on my header here: https://yogrow.co/ecommerce-stack

However I've noticed that the background-blend-mode is not working on iPhone. I just get no background color.

Here is the CSS I am using

background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;

Is the only / best option to use media queries to create a new set of css rules or is there an alternative way to have a fallback so for devices like iPhone Safari that do not show the color bg the background goes to a red.

Because I have white text on top of the background it currently looks illegible on the iPhone safari.

Thanks

Answer 1

It seems like background-blend-mode not working with background-repeat: repeat;. Try to set background-repeat: no-repeat;.