0

I have some css to place a background image within a div with a linear gradient like so:

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,.15)), url(image.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Yet nothing shows at all on iPad or iPhone. I've looked at a few other questions (Background image not showing on iPad and iPhone, CSS gradient not working on iOS) but haven't successfully been able to put it together.

How can I achieve this?

Community
  • 1
  • 1
user3065931
  • 531
  • 7
  • 20
  • have you tried to use an auto prefixer via javascript , most of the time more efficient than to write dozens of rules (that will come obsolete quiet soon) instead a few clear and clean ones in your style sheet – G-Cyrillus Nov 12 '15 at 15:27

1 Answers1

0

The issue is most likely that you are not using the correct prefix for the browser. While you are using a prefix on the background-size, linear-gradient also requires a prefix for different browsers. You can check out W3Schools tips for CSS Gradients and you can also check out the Safari Developer's Guide on using CSS gradients. Here is a quick example of the different prefixes for linear-gradient.

  -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
   linear-gradient(red, green, blue); /* Standard syntax */
Steven B.
  • 8,962
  • 3
  • 24
  • 45