CSS issue with image name @x2

Question

I discovered that for some reason CSS won't read image names that contains '@2x' (indicates that image is for retina), so for example, this will work:

#play { background: url(../images/layout/play_2.png) no-repeat; }

and this won't work:

#play { background: url(../images/layout/play@2x.png) no-repeat; }

It is the same i all browsers and across devices (iPhone, iPod, iPad). Any idea?

Answer 1

Percentage encode %40 or escape \@ the @ character and it should work.

Your “some reason” is that @ is a special character. See http://www.ietf.org/rfc/rfc3986 for more info on URLs