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

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.