rgba.php v1.2: Improved URL syntax, now at Github

I wrote the first version of rgba.php as a complement to an article on RGBA that I posted on Februrary 2009.
Many people seemed to like the idea and started using it. With their valuable input, I made many changes and released v.1.1 (1.1.1 shortly after I posted the article due to another little fix) on October 2009.
More than a year after, quite a lot of people still ask me about it and use it, so I decided to make a github repo for it and release a new version, with a much easier to use syntax for the URL, which lets you just copy and paste the color instead of rewriting it:

background: url('rgba.php/rgba(255, 255, 255, 0.3)');
background: rgba(255, 255, 255, 0.3);

instead of:

background: url('rgba.php?r=255&g=255&b=255&a=30');
background: rgba(255, 255, 255, 0.3);

I also made a quick about/demo page for it.
Enjoy :)

  • http://www.kbjrweb.com James Brumond

    I wrote something very similar i little while back; except it was built to use ImageMagick, and fall back on GD if ImageMagick couldn’t be found.
    It also used a slightly different syntax. Instead of being rgba.php, it was rgba/index.php and you would use it url(‘rgba/10,10,10,0.8′).
    Anyway, it was interesting reading through your code and comparing methods. Great work :)

    • http://leaverou.me Lea Verou

      Cool, much better syntax than the first version of mine! More concise than 1.2 too, although it has the disadvantage that you can’t just copy and paste the color value, you still have to make changes.

      Why use ImageMagick? GD is perfectly suited, it’s not like more complex shapes where you need ImageMagick’s anti-aliasing and other features.

      I saw yours too now, nice code! It’s funny how two people separately ended up in so similar solutions for the same problem. :)

      By the way, if you have anything to suggest to improve this, feel free to fork & pull request. :)

      • http://www.kbjrweb.com James Brumond

        I only used ImageMagick because at the time when I first wrote the script, it was part of a larger library which already had an ImageMagick dependency and I didn’t want to stack up both an ImageMagick and GD dependency, so I just used the one I was already using.

        Also, I thought it was kind of cool that you implemented color names… I may have to steal that idea :p

  • http://www.andrewckor.com Andrew Ckor

    Well done Lea… I think this is a very cool script :)
    The difference between your script and the rgba css3 is that your generate an image??

    And what is the browser compatibility for this?

    • http://leaverou.me Lea Verou

      This is not designed to replace the native RGBA, but to work together with it to enable RGBA-looking backgrounds in browsers that don’t support RGBA. The browsers that do, will ignore that declaration and just use the second one.
      As for browser compatibility, every browser except perhaps IE6 (I’ve heard some people couldn’t get the png to work in IE6 even with png enabling scripts, but I think it has to do with the png enabling script used).

      • http://www.andrewckor.com Andrew Ckor

        Oh yes, sorry you are right that why you use two lines of code:
        background: url(‘rgba.php/rgba(255, 255, 255, 0.3)’);
        background: rgba(255, 255, 255, 0.3);

        I will not comment about IE6:P i don’t even support it!!

        Nice good job lea! :)

        P.S.: I’ve created a noise generator based on javascript and canvas, someone can download the noise and use it for a pattern on his design, or website:) check http://www.noisetexturegenerator.com

        • http://leaverou.me Lea Verou

          I love it!! Useful tool with a beautiful & clean interface.
          Just a few remarks/suggestions, if you don’t mind:

          • Since it’s with canvas, it would seem more responsive if it changed every time you modified the parameters instead of having to click on “Generate”.
          • Most people want noise patterns to overlay on gradients, you could allow a gradient background instead of just a solid color
          • It might also be useful to include monochromatic noise patterns instead of just colored ones
          • For the downloading of the image, you could check on this: http://ajaxian.com/archives/downloadify-create-downloads-on-the-fly-without-server-interaction I remember I’ve seen a JS-only method for this too (in a much more limited fashion), but I can’t find it now.
  • http://www.munkyonline.com/ Darren Lovelock

    Excellent idea to simplify the URL syntax. I’ve been using this on a number of sites now and have noticed that IE7 page loading suffers if the generated img is smaller than 10×10. 1.1 helped with that issue though by adding the ability to configure the image size.

    Just spotted the smiley face img at the bottom of the right column on this page. What’s that for? Thought it may be a secret link but it doesn’t appear to do anything.

    On closer inspection I see its something to do with WordPress stats – weird!

    LOL love the IE notice in the source code – that should be an alert message on all websites :)

    • http://leaverou.me Lea Verou

      That’s from WordPress, probably to track pageviews and other stats. Most sites use a 1×1 transparent gif for that, but I guess WP makers thought it would be funny to add a smiley face :P

  • http://www.kbjrweb.com James Brumond

    Given the similarity, I thought you might be interested in a piece of software I just finished. Basically, its the same idea as this, except it also does textured backgrounds :)
    https://github.com/kbjr/Texture-Back

  • http://my.opera.com/c69 Constantine

    :(((

    WHY ???

    if we already use background url, how about using image, and i mean real image – after all we are performing http request and making the site lag ?

    if we are so lazy to bake images, why not use ONLY rgba and ignore old browsers (*ignore = “progressive enhancement”, *old = IE7 & IE8) ?

    if we are so modern, then why not use HSLA, instead of RGBA ? its much easier to comprehend, and its supported by all modern browsers.

    • http://leaverou.me Lea Verou

      You may as well use a “real” image. I sometimes use rgba.php to generate it and then use the generated png file, to save on resources. In some cases however, that’s not feasible (for example if you want to allow users to customize the design of a page in some way, then it needs to be produced dynamically). Using the dynamically generated images is also quicker, so it’s good for prototyping.

      As for HSLA, I think there are a few browsers that support RGBA but not HSLA, so it’s just a habit for me. I’m also kinda used to RGB, so I can come up with the color code I need just as easily as with HSL.

  • Johnny F

    Great code!

    Just spotted an error in the git.

    in rgbp.php:
    Line 85: if (count($color_array == 2)) {
    should read: if (count($color_array) == 2) {

    This triggered an error here.
    Just for others to note.

    • http://leaverou.me Lea Verou

      Oops, how did I miss that? Thank you so much, will update as soon as I find some time to do so.

  • wb

    To serve as background one still needs to insert ‘repeat’ :
    background: url(‘rgba.php/rgba(255, 255, 255, 0.3)’) repeat ;

    Correct?

    • http://leaverou.me Lea Verou

      No, because repeat is the default.

      • wb

        Thanks for clarifying! ;)

  • wb

    I was able to fix the bg transparencies in IE8 – but IE7 is still a problem – at least according to https://browserlab.adobe.com
    Shouldn’t IE7 work ok? And another question: can I set other properties, like border-colors etc. with this method?

    P.S. great work – thanks much!

    • http://leaverou.me Lea Verou

      Yes, it should work in IE7. What problem are you facing?

      As for the second question, no, sadly you can’t since border-color doesn’t accept an <image>, let alone a repeated one.

  • pepebe

    A quadzillion thanks to Lea. I love that approach!

    I’ve removed a few glitches around line 83 and added some instructions to the source.

    background: url(‘rgba.php/rgba(255, 255, 255, 0.3)’);
    background: url(‘rgba.php/black,0.1′);
    now work as advertised.

    Until Lea has the time to upload a new version at githhub, you may download an updated version from my dropbox public folder: http://dl.dropbox.com/u/1840535/Experimente/rgba/rgba.php
    As soon as a new version is online, I’ll remove it.

    Regards,

    pepebe

    • http://leaverou.me Lea Verou

      I was going to fix it soon, but since you already did, why not submit a pull request? :)

      (haven’t seen the code yet, so I can’t guarantee I’ll accept it, but I usually do)

      • pepebe

        If you did in the last few minutes, do it again. Found another glitch (this time mine…) :)
        Now it works.

  • Ash

    Hi,

    Many thanks for this code i’ve been using it on my site (http://www.subaquaacademy.com) however after adding a few pages recently (http://www.subaquaacademy.com/pl) i’ve found that the code works for the previous pages but not for the new ones (IE8).
    PHP is not my string point and any comments would be greatly appreciated, I con only think that it is something to do with relative directories but i’mjust guessing

    • http://leaverou.me Lea Verou

      There are two possible scenarios:
      - It has stopped working completely for some reason and the older pages just show cached images
      - You are not referring to rgba.php correctly. Use Firebug (or equivalent) to inspect  and see if the image is not found. 

      • Ash

        Hi,

        Thanks for your reply, I’ve cleared the cache on IE and still get the same problem so it must be working for some of the pages and all pages use the same CSS style sheet so I can’t see how I could be referring to rgba.php incorrectly (although I am  a bit of a novice so I could have easily made a mistake somewhere). I would appreciate any further thoughts you may have.

        Cheers

        • http://leaverou.me Lea Verou

          I’m sorry, I can’t think of any possible reason for that to be happening. What happens when you inspect it? Can it find the image? Tip: for debugging only, it might be useful to comment the real RGBA colors out, so that you can use Firebug or Web Inspector to debug, rather than IE8′s horrible dev tools.

        • Ash

          Hi,

          Thanks for all your suggestions, I’ve figured out what the problem was. Using a relative URL in my style.css to refer to rgba.php was causing an issue when used in conjunction with a path-based multi-site implementation of wordpress. The second site was incorrectly referring to the location of rgba.php due to me using the path-based approach.

          I fixed the issue by using an absolute URL to refer to the rgba.php file location.

          Thanks again for you support

          Ash

  • Tore B. Krudtaa

    Thank you Lea for this excellent piece of work. Makes it so fast and easy to create those transparent backgrounds. I made one small change to the rgba.php I downloaded: I added the option to use another parameter to create a custom filename. Another way to improve it (a bit) would be to enable the following way of specifying the colors and alpha: rgba.php?c=255-100-50-80
    where the order of the colors and alpha are: r-g-b-a
    It would, IMHO, make it easier to enter the values needed and it would be shorter. Anyway… a great script that makes those transparent backgrounds a joy to generate.