#041: Building the Top Treehouse Ad, Part 2

(Updated on )

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.