Ran into an interesting problem on a website I was developing. I found several images that displayed on one page but not on another. They were all being used as inline images on the pages they displayed on and as background images on the pages they failed to display on. Clearly the links were good, the images present and coding sound since other images were displaying using the same code.

To my surprise, looking at the code I found this:


background-image: url(image name.jpg);


The owner had been uploading dozens of images with spaces in the names. Part of my job has always been to educate clients but is impossible to tech everything. While I educate and replace images I found a simple work around for this situation. Single quotes around the image name were able to communicate to the browser that the name was all part of one image.


background-image: url('image name.jpg');


Spaces in file names choke a variety of programs and platforms including many indexers. URL encoding all file names is a good idea but rather than using %20 for spaces I prefer hyphens or underscores. Aside from alphanumeric they are the only safe characters to use.