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.

Comments

  1. User Avatar
    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)

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

  2. User Avatar
    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.

    • User Avatar
      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.

    • User Avatar
      CWSpear
      Permalink to comment#

      Yay, screw IE8! I love it.

  3. User Avatar
    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. User Avatar
    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!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag