Strange bug(?) on iOS: SVG background images no showing

By Geoff Muskett

I’ve come across this a couple of times now, you’ve set an SVG as a background image, and all is fine until you look at it on an Apple device; the SVG mysteriously doesn’t show.

The simple fix is to make sure you are declaring background-size before background-position in the CSS.

It may be something do with the order shorthand background properties should be declared. I’m not sure, but it’s one of those little things that can cost you time and drive you crazy. I drove me crazy for a short while the first time, so I hope this helps your sanity.


November 11, 2014

My svg background still not show in iphone. Have another clues?

Geoff Muskett
December 20, 2014

Hard to say without looking at your code.

Here's a long shot: have you got the any capital letters in the file name, and not added them in your css. Sometimes they are recognised, sometimes not. Usually it's strict, and rightly so.

Greg Smith
October 28, 2015

FWIW, I've just found that your fix, in addition to breaking up the background properties (so they're on separate lines) was the key to getting it to work for me. Not sure why a shorthand property didn't work for me, but that was my winner. Cheers!

November 29, 2016

Wow, it just worked! You Saved me hours..
Would be great to actually understand what's happening here, I guess it's some sort of a bug?

November 17, 2017

Thank you for documenting this fix. I've just encountered the same issue on iPhone X / Mobile Safari. Oddly enough, it's not a problem for me on other iOS devices or desktop Safari. This is such a bizarre and frustrating bug to resurface 3 years later.

March 19, 2018

Thanks. This fixed it. My code:
background-size: 22px;
background-image: url(../images/ruler.svg);
background-repeat: repeat-x;
background-position: top center;
background-color: red;

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.