After the weird confusion in the last video about which header we were actually doing, this time we really are going to be implementing the custom header for the Deals page! This one was done by Meg Hunt.

Like all the headers, we spent some time looking at the original files and figuring out how it's going to best sit on the page. We try a few options, but ultimately decide putting it in a confined box is best (as opposed to something like the Demos header where the header melts into a border around the content.

On exporting it, we play with a lot of the different graphic formats. This particular style, interestingly, is about the equal in both quality and file size between PNG and JPG. We output it at 2000px wide, which should look good on any screen. We also hit about 150k, which is big but for a hero graphic like this, is an OK target.

We start getting the template for deals in order, including looking at how deals are each individual custom fields that are randomized before being output. We'll spend more time on this markup and all that later, but since we're in this template getting things ready for the header we might as well clean it up.

We look at several different possibilities for putting the custom header graphic onto the page. A background-image makes the most sense, since we're using a semantic <h1> for the title and image replacement. Using background-size, we check out cover, but that can cause cut-offs. We check out contain, but that allows space on the outside. 100% does the trick, but we'll need to make an aspect-ratio style box to have that work nicely. That's easy though, we just make the height 0 and use a percentage top padding to make that work (padded box).

This is the seventh custom header we have done and every single one of them was done differently. Web design, eh? What a trip.


  1. Kyle
    Permalink to comment#

    Tip: You can do math calculations within Spotlight – no need to launch Calculator. Cmd+C to copy the value.

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.