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?

1

Try using `play\@2x.png` – Mr. Alien Oct 20 '13 at 08:14

Matijs · Accepted Answer · 2013-10-20T08:47:59.453

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

edited Oct 20 '13 at 08:47

answered Oct 20 '13 at 08:21

Matijs

3,118
2
29
41

Yes my bad, thanks for pointing this out. I removed it from the answer. Quotes don't make `@` any less special. – Matijs Oct 20 '13 at 08:49
It seems that the only way is to avoid using that '@2x' in image names. Thanx anyway! – Ayreonaut Oct 20 '13 at 08:54

CSS issue with image name @x2

1 Answers1