All Tutorials  >

Hero Blocks with Images

Learning Goals

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

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

Sample image hero-bg-image.html

Contents

About hero blocks

Working with your sample files

Hero block: sample six

Hero block: sample seven

Hero block: sample eight

Hero block: sample nine

Uploading your files to GitHub

About hero blocks

So-called hero blocks (sometimes known as jumbotrons) are large and typically rectangular areas at the very top of a web page.

They are the first item seen by users, and are intended to capture their attention and engage their interest in the web page.

Working with your sample files

In this exercise, you will work with the following two files, a web page and a stylesheet:

You have now saved the two files you need for this exercise.

Hero block: sample six

In this section, you will add a background image to the hero-6 block within your sample files.

  1. In your browser, display the hero-bg-image.html web page. You can see it that all the hero sections have a gray-coloured background.
  2. In VS Code, open the hero-bg-image.css stylesheet.
  3. For the hero-6 styles, around line 33, replace the current background-color property and value with the following:
       hero-6  {
          ...
          background-image: url('hotel-dark.jpg');
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
      }
    Note: The three dots ... simply refers to all the other styles for the CSS selector.
  4. Save the stylesheet and view the effect on the web page in your web browser.

Hero block: sample seven

In this section, you will add a background image to the hero-7 block within your sample files.

  1. For the hero-7 styles, around line 188, replace the current background-color property and value with the following:
       hero-7  {
          ...
          background-image: url('bike-tours.jpg');
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
      }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Adding a shadow effect to the hero text

To make the text easier to read against the background image, let's add a shadow effect to the heading and sub-heading.

  1. In the stylesheet, add the following new style rules for the heading and sub-heading.
       hero-7 h1  {
          ...
          text-shadow: 2px 2px #222;
      }
       hero-7 h2  {
          ...
          text-shadow: 2px 2px #222;
      }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Adding an overlay to the background image

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

  1. In the stylesheet, add the following new style rule for the hero-7 hero block.
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url('bike-tours.jpg');
    
  2. Save the stylesheet and view the effect on the web page in your web browser.

Hero block: sample eight

In this section, you will add a background image to the hero-8 block within your sample files.

  1. For the hero-8 styles, around line 345, replace the current background-color property and value with the following:
       hero-8  {
          ...
          background-image: url('meeting.jpg');
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
      }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Adding a shadow effect to the hero text

To make the text easier to read against the background image, let's add a shadow effect to the heading and sub-heading.

  1. In the stylesheet, add the following new style rules for the heading and sub-heading.
       hero-8 h1  {
          ...
          text-shadow: 2px 2px #222;
      }
       hero-8 h2  {
          ...
          text-shadow: 2px 2px #222;
      }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Adding a tinted overlay to the background image

To make the text even easier to read against the background image, let's add a blue-tinted semi-opaque overlay in front of the image and behind the heading and sub-heading.

  1. In the stylesheet, add the following new style rule for the hero-8 hero block.
    background-image: linear-gradient(rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url('meeting.jpg');
    
  2. Save the stylesheet and view the effect on the web page in your web browser.

Hero block: sample nine

In this section, you will add a background image to the hero-9 block within your sample files.

  1. For the hero-9 styles, around line 482, replace the current background-color property and value with the following:
       hero-9  {
          ...
          background-image: url('hook-head.jpg');
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
      }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Adding a different image for mobile screens

To offer a different image for mobile screens, follow these steps.

  1. In the stylesheet, add the following new style rules for the hero-9 block.
    
    /* Desktop - Background image  */
    @media (min-width:768px) {
        .hero-9 { background-image: url('hook-head.jpg'); 
    }
    
    /* Mobile - Background image  */
    @media (max-width:767px) {
        .hero-9 { background-image: url('hook-head-mobile.jpg'); 
    }
    
  2. Save the stylesheet and view the effect on the web page on desktop/laptop and mobile size screens.

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

Uploading your files to GitHub

Upload the following web page and stylesheet to your account on GitHub:

hero-bg-image.html
hero-bg-image.css
hotel-dark.jpg
bike-tours.jpg
meeting.jpg
hook-head.jpg
hook-head-mobile.jpg

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



Return to Contents.