We have the markup in place for the Treehouse ad on the top of the page, but we have some styling work to do. We start with the tree graphic itself.

We're thinking that using vector and outputting as SVG might be cool because it will look sharp and be of small file size. Watch me flail around in Illustrator trying to get a nice clean version of it in all vector and ultimately fail. For now we decide to forget it and just make it an image.

Turns out, Treehouse doesn't use that branding anymore anyway, so I'll need to update it anyway soon, and I'll definitely be taking the time to make it SVG, even if I have to re-draw it.

For now, we make PNG and drop it into the design with a CSS background. We size it way down with background-size (although I confused myself yet again by using percentages -- remember when you use a percentage it is a percentage of the partent element not a percentage of the size of the image itself).

We get the coloring and sizing and positioning all set. Now the last step is making it work in the responsive design.


  1. Jay
    Permalink to comment#

    Is this video not saved/recorded in HD or is the vimeo embed has it turned off?

    (Great stuff so far btw)

    • Chris Coyier
      Permalink to comment#

      That was weird. I re-uploaded it and it’s way better now. Thanks for reporting! I’m gonna bury this comment just because it was a temporary thing.

    • christopherisaak
      Permalink to comment#

      I’m still having a problem with the download file. Its really low quality compared to the other stuff so far.

    • Chris Coyier
      Permalink to comment#

      Yeah the file size for that is weirdly small. I’ll upload a better copy.

  2. CWSpear
    Permalink to comment#

    Maybe you talk about this at a later time, but why background-size?

    I guess you haven’t talked about what browsers you’re targeting, but IE8 doesn’t support background-size, and so this ad won’t degrade very gracefully.

    Is there a particular reason you didn’t use an img tag with explicit height and width set to half the actual size of the image? (Is that suitable to get Retina displays? That would you wouldn’t have to mess with the image size changing as you change the width of the container, too.

    As far as I know, they are both pretty much the same speed-wise, right? Both require an additional http request, and because your have width and height set on your image, it shouldn’t cause repaints from reflow when the image loads.

    • Chris Coyier
      Permalink to comment#

      Fair points all around but…

      1) Not supporting IE 8. I can get away with that on a site like this.

      2) I think of <img> as content-in-the-form-of-images where this is just a background design feature thing, perfectly suited for CSS background imagery.

    • CWSpear
      Permalink to comment#

      Yay, screw IE8! I love it.

  3. Gary A
    Permalink to comment#

    For an image like that clearly with less than 256 colors, you should probably save it as an indexed png-8 (gif replacement). You can also have up to 256 levels of alpha transparency (as opposed to gifs which are indexed transparency).

    The only think you have to be careful of is that older versions of photoshop (v5 still didn’t do it!!!) don’t save the alpha transparency them properly (as far as I remember).

    Fireworks does it properly, though… because Fireworks is awesome like that.

  4. Sino
    Permalink to comment#

    Chris, your screen casts are amazing. I know this is coming a few years late but I thought you should be reminded if you ever do take a look at these comments. “Thats Kevin im’ing me, hes a very nice man.” hahaha. Anyways, I have learned so much just up until this point, and i look forward to what comes in the future!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.