Preparing Your Website for COVID-19 Part 2: Hero Banner

In Part I of our series, we showed you how to build an Alert Bar to catch your audience's attention and display important information about COVID-19. In Part 2, we'll show you how to build a hero banner to display your COVID-19 related updates.

A Hero Banner is a large visual website element that combines full-screen-width imagery with strong, action-oriented copy. Because a Hero Banner appears at the top of your website homepage, it garners significant attention. All eyes are on it.

Just like an Alert Bar, a Hero Banner can be an effective tool for elevating your COVID-19 response strategy and linking visitors to critical information. But the advantage of a Hero Banner is the ability to use striking imagery or graphics in a larger dedicated space. This gives you the ability to drive attention and traffic to critical updates, specific instructions, or other details that are central to your COVID-19 efforts.

In this tutorial, we'll show you how to build a hero banner that is easy to customize with your own graphics and messaging. The HTML and CSS are below:

HTML

The HTML is wrapped with a unique "covid-hero" class so that the CSS styles can target this element specifically without interfering with other elements. Swap the image for one specific to your business or industry with recommended dimensions of 1920px by 600px. Customize the content inside the "header-content" element to meet your needs.

CSS

The CSS utilizes the object-fit property to make sure the image scales properly to the container and on mobile devices. Additionally, the "header-content" class has a background-color with a transparent opacity to ensure readibility but allow the image behind it to be visible.

Result