jQuery Repo: CSS Hack: Using images with space character in file name

Wednesday, 26 June 2013

For us the following two file names may not hold much difference but when using CSS we have to take care of the space between the file names.

1. Page background.jpg

2. Page_background.jpg

For instance, to set a background image of a page using CSS we would have to add the following two lines of code -

background:#F7F9fa url(../Images/Page background.jpg);

background-repeat:repeat-x;

The above code would run fine on Internet Explorer but not on Firefox or Safari. The reason is the space character in the file name.

So to be in safe side you can use some work around for it.

Enclose with qoute(')
background:#F7F9fa url('../Images/Page background.jpg');
Using Encode charecterbackground:#F7F9fa url('../Images/Page%20background.jpg'

Thanks,

Rajasekhar.

jQuery Repo