Hero Section Website

One common mistake when designing a hero image is getting the right file size. Too large, your loading speed plummets. Too small, everything looks pixelated. Let's walk through the different hero image sizes so you can create a stunning image every time.

No hero image is complete without a button that drives people to take action. Incorporate one into your image with the <button> element. Just make sure to include the font-family since the text doesn't automatically translate from the .hero-content element.

Hero Section Website

Not all hero images have centered text, but most have a centered image. To align your background image, you can make a flex container by incorporating display, justify-content and align-items under your .hero element.

For centered text, include a .text-align: center rule under your core content element. In the following example, the text is nested under the .hero-content code.

You want your hero image to look good no matter the screen size. Setting media queries allows you to create parameters so your image is responsive at a particular screen width.

Congratulations, your HTML structure is set! Test out how the image, text, button, margins, padding, and centering look on different screen sizes. If something seems off, comb through your code to see if you can find issues. For detailed instructions on creating and troubleshooting with HTML, check out this article from DeveloperDrive. All look good? It's time to add style with CSS.

While HTML creates order, CSS (Cascading Style Sheets) adds flair. It's a rule-based language that complements the HTML elements by applying stylistic effects. For example, CSS lets you turn the text in a hero image header bright yellow so it pops against the purple background.

If you don't include CSS within your hero image, the HTML elements default to the basic browser properties like the example below.

By including CSS rules, you can develop an image that draws in visitors instead of scaring them away. The above HTML examples include CSS rules, but let's walk through a basic design so you can work it into your own image.

Design Landing Page

The following template outlines the basic HTML and CSS needed to create a full-screen hero image. You can adjust the style by changing the rules under the .hero or .hero-text elements, like font-family, color, border, or padding-top.

 Once the structure is in place, it's time to personalize your image. Add an image, choose a custom font, craft a header and subheader, and create a button with an enticing CTA. If you want to add a filter to your background image (without applying it to the text), DeveloperDrive recommends including the filter before your .hero-content code.

Notice how the width and height under the .hero section are set to 100vw and 100vh. This ensures the image fits the entire viewport, both vertically and horizontally, so it spans the whole screen.