title: CSS: A background-blend-mode fallback for iPhone Safari
body: <p>I'm susccesfully using background-blend-mode on my header here: <a href="https://yogrow.co/ecommerce-stack" rel="noreferrer">https://yogrow.co/ecommerce-stack</a></p>
  
  <p>However I've noticed that the background-blend-mode is not working on iPhone. I just get no background color.</p>
  
  <p>Here is the CSS I am using</p>
  
  <pre><code>background-repeat: repeat;
  background-image: url("assets/img/swirl_pattern.png");
  background-color: #E33551;
  background-blend-mode: multiply;
  </code></pre>
  
  <p>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.</p>
  
  <p>Because I have white text on top of the background it currently looks illegible on the iPhone safari.</p>
  
  <p>Thanks</p>