Problem with path in CSS style sheet when substituting image file with data URI.

[Marvin Hlavac]

If anyone could help me with the following issue, I would greatly appreciate it.

I have successfully used the following three different ways of writing a path to an image file in Additional CSS Definitions. The three examples are followed by a 4th example which doesn't work (and that's my issue).

This works:

background: url("image.gif");

This works:

background: url("http://www.mysite.com/image.gif");

This works:

background: url("http://www.differentsite.com/image.gif");

This doesn't work:

background: url("data:image/gif;base64,R0lGODlhEgASAMQAAP//////M///AP/MzP+9AP+ZmczMZszMM8wzM5n/ZpkzM5kAAJKSkoSCAHd3d2ZmM2YzM1VfAAAA/wAAAMDAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAASABIAQAWaICWKTdSIRxSNo+q+sMpSTkMYuEE0DmsewFLJBTw0SjRCYlA4BJ6BQ2EwIPRMo+HRNUqZtkJhbKUgUAHoJxpAJShGDgK08Xg0ngLrTPQ9emc/fENEJF5ghy5HgyqKjY5DFAgBBAQAEhJHlwCUAQgiEGYLA1BQA6IEECIMdwkJB2ubrQINDCxxAQJFBwJ5PXsUDA4KEBAKDrUsIQA7");

After I saved the above data URI to Additional CSS Definitions, I checked the source code of the resulting CSS file, and I saw that vBulletin added ../ characters in front of the data URI, and it just didn't work:

 background: url("[COLOR=red][B]../[/B][/COLOR]data:image/gif;base64,R0lGODlhEgASAMQAAP//////M///AP/MzP+9AP+ZmczMZszMM8wzM5n/ZpkzM5kAAJKSkoSCAHd3d2ZmM2YzM1VfAAAA/wAAAMDAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAASABIAQAWaICWKTdSIRxSNo+q+sMpSTkMYuEE0DmsewFLJBTw0SjRCYlA4BJ6BQ2EwIPRMo+HRNUqZtkJhbKUgUAHoJxpAJShGDgK08Xg0ngLrTPQ9emc/fENEJF5ghy5HgyqKjY5DFAgBBAQAEhJHlwCUAQgiEGYLA1BQA6IEECIMdwkJB2ubrQINDCxxAQJFBwJ5PXsUDA4KEBAKDrUsIQA7");

I spent literally the entire day today trying to figure out a work around.

Would someone be so very kind and offer a fix or a work around?

[Zachery]

Why are you trying to base64 encode image?

[Marvin Hlavac]

Wow, Zachery, that was fast! I posted the above, subscribed to it, and I was just above to turn off my laptop, but I noticed I had an email notification of a reply! :-)

Well, Zachary, I'm simply trying to save an http request by using a data URI instead of a gif file. Is there anything I can do to place the data URI into my css file?

[Zachery]

I wouldn't suggest it. If you're trying to optmize things, migght as well run your static content off of a better http server like nginx.

[Marvin Hlavac]

Zachery, I run my static content via a CDN (Content Delivery Network) with POPs (Points of Presence) in North America, Europe, Asia, Pacific, and South America. I've done a lot of work to optimize my site. At the moment my forum home has only 5(!) http requests , and I'm still pushing it even further. If I manage to implement this change, my home page will only have 4 http requests, and that should result in 50 to 200 milliseconds of savings for a first time visitor to my site. The one saved http request in this case would be site-wide.

Can you think of an easy way to remove the ../ from the css file?