Hero Blocks with Images

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.

You can view the finished version of the sample web page you will update in this Tutorial by clicking the image below. The finished sample will open in a new tab of your web browser.

Updating the stylesheet

As you can see in your web browser, the image has ‘spilt out’ over the bottom edge of the hero-block container. The image, like its parent container, should not be taller than 80% of the viewport height.

Let's update the stylesheet so that both the text and the image display correctly.

1. In the hero-image.css stylesheet, replace the entire hero-block declaration by copying-and-pasting the following.

   .hero-block {
       min-height: 500px;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: center;
       background-color: gray;
       overflow: none;
   }
   

2. On a blank line under the .hero-block-container, copy-and-paste the following two new items to the stylesheet.

   .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%;
   }

3. Next, to the .hero-block-container, which currently holds only padding values, add the following new style rule.

   z-index: 1;
   

4. Save the hero-image.css stylesheet.
5. 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.
6. Save the hero-image.html file.

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

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.

1. In the stylesheet, add the following new style to the combined .hero-block h1, .hero-block h2 selector.

    text-shadow: 2px 2px #222; 

2. 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.

1. 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.
2. In the stylesheet, copy-and-paste the following, to just under the .hero-bg-media img selector.

   .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));   
   }

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

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

Click hero-image.html to view a finished sample of this web page in a new tab of your web browser.

Uploading your files to GitHub

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

1. 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.
2. 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
3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
4. From the dropdown list displayed, choose the option Upload files.
5. 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.
6. 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.
7. Finally, click the green Commit changes button to upload your files.

Your updated home page and sample web page are now published on GitHub at web addresses similar to the following:

https://username.github.io/index.html
https://username.github.io/exercises/hero-image.html

It may take a few minutes for your uploaded files to appear on GitHub.