Hero Blocks with Images | Web Design & Development Tutorials

Learning Goals

At the end of this Tutorial, you will be able to:

Add a background image to a hero block.
Add a shadow effect to the hero text.
Add a tinted overlay behind the hero text and in front of the background image.

About full-width hero backgrounds

Hero blocks with full-width background images are a common design choice of web developers. See the examples below.

In this Tutorial you will create a hero block with a background image and a tinted overlay. See below.

Stacking layers in HTML/CSS

You can create a 3D effect in a web page where one item overlaps another with the z-index and position CSS properties.

z-index: HTML elements with higher z-index values will display in front of elements with lower z-index values. By default, elements have a z-index of 0.
position: The z-index property does not work with HTML elements that have the default position property of static.

Here are the typical steps for creating a 3D layering effect:

Create a parent container such as a <header>, <section> or a <div> to contain the overlapping elements. In your CSS file, give this parent container a position: relative style.
Inside this parent container, add a number of child <div> elements that will overlap one another. In your CSS file, give each child element a position: absolute style and a z-index value to set the stacking order. Typically, you will want to set the overlapping child elements to fill the full space of their parent container. So, also add this style rule for each stacked child element:
```
    top: 0; right: 0; bottom: 0; left: 0;
```

Working with your sample files

In this Tutorial, you will update a copy of the sample web page and stylesheet you worked with in the previous Hero Blocks with TextTutorial.

In VS Code, open the hero-text.html web page and save it with the new name of hero-image.html.
Open the hero-text.css stylesheet and save it with the new name of hero-image.css.
In the new hero-image.html file, edit the name of the linked stylesheet from hero-text.css to hero-image.css, and save the web page.

Replace the current title and description details with the following:

<title>Hero Block with Image</title>
<meta name="description" content="A hero block with a background image and a tinted overlay.">

Finally, save the following image to your websites/exercises/assets/img sub-folder: business.jpg

You have now saved the files you need for this Tutorial.

Adding the background image

Let's begin by adding the sample background image named business.jpg to the web page. Here are the steps.

Copy-and-paste the following lines to your hero-image.html web page, to just under the .hero-text-container block.
```
<div class="hero-bg-media">
    <img src="assets/img/business.jpg" alt="sample background image">   
</div>
```
As you can see, the image is a child of a parent container named hero-bg-media. Your web page should now look as shown below in VS Code.
Save your web page.

In your browser, your web page will look as shown below.

Updating the CSS to support stacking

Let's update the stylesheet so that the text 'stacks' in front of the image.

In the hero-image.css stylesheet, add this new style rule to the header { } declaration.

At the end of the CSS file, add these three new declaration blocks.

.hero-text-container {
    position: relative; 
    z-index: 1;
}    
    
.hero-bg-media {
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 0;
}
                    
.hero-bg-media img {
    object-fit: cover; width: 100%; height: 100%;
}

The object-fit: cover style rule tells the image to fill its .hero-bg-media container while keeping its aspect ratio. Some parts of the image might be cropped if its proportions don’t match the container’s proportions.

Save the hero-image.css stylesheet.
Finally, switch to the hero-image.html web page, and add the following new line to the <head>, to just before the stylesheet link.
```
<link rel="preload" href="assets/img/business.jpg" as="image">
```
This directs the web browser to give priority to the business.jpg hero image when loading the various components of the web page.
Save the hero-image.html file.

In your web browser, the web page should now look as shown below.

About the `position: relative` CSS property

The position: relative property establishes a new positioning context for a parent element that has inside it child elements with a position: absolute property.

Without position: relative, the absolutely positioned child elements would be positioned relative to the entire document (<html> or <body>), not within the parent itself.

In summary, by adding position: relative to the parent, the child elements are positioned relative to the parent container.

Adding a text shadow

To ensure the text in front of the image is easy to read, let's add a drop shadow effect to the <h1> main heading and <h2> sub-heading.

Here are the steps.

In the stylesheet, add the following new style to the combined .hero-text-container h1, .hero-text-container h2 selector.
Save the stylesheet and view the web page in your browser. It should now look as shown below.

Note how the text is now easier to read against the background image.

Adding a semi-opaque overlay

To make the text even easier to read against the background image, let's add a semi-opaque overlay. This will be positioned in front of the image and behind the heading and sub-heading. Follow these steps.

Copy-and-paste the following new element to the hero-image.html file, to just under the element.
```
<div class="bg-overlay"></div>
```
Your complete hero-block container will now look as follows.

In the stylesheet, copy-and-paste the following at the end.

.bg-overlay {
   position: absolute; 
   top: 0; right: 0; bottom: 0; left: 0;  
   z-index: 1;
   background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));   
}

In the .hero-text-container selector, update the z-index value from 1 to 2.
Save the hero-image.css stylesheet.
In your web browser, the web page should now look as shown below.

All done.

Updating your website home page

You are now ready to upload your work to your accont on Github. Follow the steps below:

In VS Code, open this HTML file in your ‘main’ websites folder: index.html
Copy-and-paste the following new line to your web page at end of current list of web pages.
```
<p><a href="exercises/hero-image.html">Hero block with background image</a></p> 
```

Save your index.html web page and view the result in your browser.

✅ That’s it. You have now successfully completed this Tutorial.

Uploading your files to Github

After finishing your web page and stylesheet, you are now ready to upload them to your account on Github.

Open a new tab in your web browser and go to Github.com. If you are not already signed in to your Github account, sign in now.
On your Github home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on Github. username.github.io
On the next Github screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 exercises sub-folder to upload them to your repository on Github.
Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
Finally, click the green Commit changes button to upload your files.