How to Create a CSS Hero Image

Hero images are a common feature on websites. Hero images, often placed at the top of a page on a website, are large images with text that appears in front of the image.

Hero images allow you to add a visual component to a site, while still allowing you to present information, like a title. While the exact features in a hero are up to you, most hero images include a title, a subtitle, and a button that links to another part of a website.

This tutorial will discuss, with examples, the basics of hero images, and how you can use HTML and CSS to create a hero image. By the end of reading this tutorial, you’ll be an expert at creating hero images using HTML and CSS.

Hero Images

Hero images appear all over a wide range of websites.

Many website home pages, for example, use a hero image to attract attention to the top part of the home page. In addition, many blogs use hero images to add a visual component to a webpage that would otherwise be mainly text.

But how do you create a hero image? To do so, we need to use both HTML and CSS. We’ll use HTML to define the structure of our hero image—what it should include—and then we will use CSS to add styles to our hero image.

For this example, we are going to design a hero image for Le Cafe 2020, a new French cafe that has opened up in the neighborhood who is looking to create a website. Here is the final result of the code we write in this tutorial:

Now, let’s get started creating our HTML and CSS hero image!

Step 1: Write the HTML Code

To get started, we are going to define the structure of our image using HTML.

Le Cafe 2020, the French cafe whose website we are designing, wants a hero image to appear at the top of their web site’s home page. The hero image should:

• Use a stock image of a restaurant
• Show off the heading “Le Cafe 2020”
• Display the subheading “Premier restaurant serving fine French cuisine and wines in Brooklyn, NY.”
• Show a button with the text “Book a Table”. This button should link to the page “book.html”.

Here’s the code we could use to create the structure for our hero image:

<div class="heroImage">
	<div class="heroContents">
		<h1>Le Cafe 2020</h1>
		<p>Premier restaurant serving fine French cuisine and wines in Brooklyn, NY.</p>
		<a href="/book.html"><button class="bookButton">Book a Table</button></a>
	</div>
</div>

Let’s break down our code. First, we create a <div> tag with the class “heroImage”. In our CSS code, we’ll use this class to add a background image to our hero.

Then, we create a <div> tag with the class “heroContents”. This <div> tag contains the contents of our hero image: the text and button.

Next, we use a <h1> tag to create our header, a <p> tag to declare the subheading that should appear in our hero, and a <button> tag to add a button which displays the text “Book a Table” on our web page. The <button> tag is surrounded by an <a> tag, which allows us to link the button to the “book.html” page on our website.

Step 2: Write the CSS Code

Now that we’ve defined the structure of our hero, we can add styles.

First, we are going to create the styles for the “heroImage” class. This class will display the background image for our hero. Here are the styles we will apply to the “heroImage” class:

.heroImage {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9)), url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
	height: 50%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

Let’s break down these styles. First, we use the background CSS property to create the background for our hero. We specify a linear gradient, which adds a gray effect in front of our image so that the text in our hero is easily visible, then we specify the background image we want to appear in our hero.

Next, we set the height of the hero image to be 50% of the size of the web page. We then use the “background-position: center” rule to make our image appear in the center of our hero. We also use the “background-repeat: no-repeat” rule to prevent our image from appearing multiple times in the hero, which could happen depending on the resolution of the user’s device.

Next, we are going to style the contents of our hero image, which are stored within a <div> tag with the class “heroContents”. Here are the styles we will apply to the “heroContents” class:

.heroContents {
	padding-top: 25px;
	text-align: center;
	color: white;
}

In this code, we have aligned all the text in our hero to the center of the hero using the “text-align: center” rule. We have also added a 25px padding between the border of the top of our hero and the start of our text. Finally, we used the “color” property to set the text color of our hero’s contents to white.

The final step in styling our hero is to change our button. Le Cafe 2020 wants the button to appear in blue, with no border, and for the button to use white text. The button should have rounded corners. We could use the following code to create this button:

.bookButton {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  font-size: 15px;
  border-radius: 10px;
}

The above code sets the styles for the button in our hero. Let’s break down each style, line-by-line:

• background-color: blue sets the background color of our button to blue.
• border: none removes the default border from our button.
• color: white sets the color of the button’s text to white.
• padding: 10px creates a 10px-wide gap between the contents of the button and its borders.
• font-size: 15px sets the size of the text in the button to 15px.
• border-radius: 10px adds a rounded corners effect to our button.

When we combine all the code we have written in this tutorial, we get the hero image we showed earlier in this article. And that’s all you need to know to create a basic hero image using HTML and CSS!

Conclusion

Hero images are one way in which you can make a website more aesthetically pleasing. A hero image is a container with a background image that stores a heading, a subheading, or any other web element.

This tutorial discussed the basics of hero images and how to create a hero image using HTML and CSS. Now you have the skills you need to start creating your own CSS hero image like a professional web developer!