Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:
    Code:
    background: url("image.gif");
    This works:
    Code:
    background: url("http://www.mysite.com/image.gif");
    This works:
    Code:
    background: url("http://www.differentsite.com/image.gif");
    This doesn't work:
    Code:
    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:

    Code:
     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?

  • #2
    Why are you trying to base64 encode image?

    Comment


    • #3
      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?

      Comment


      • #4
        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.

        Comment


        • #5
          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?
          Last edited by Marvin Hlavac; Tue 5 Apr '11, 1:20am.

          Comment

          Related Topics

          Collapse

          Working...
          X