Hero Blocks with Images

About hero blocks with background images

The most common design approach to hero blocks on web pages is to use a full-width background image. Typically, the text in front of the background image is centre-aligned. See the examples below.

You will also see examples where the text is left-aligned.

In this Tutorial, you will work with four examples of hero blocks with background images.

Downloading your sample files

Your first task is to download the following web page and a stylesheet:

• hero-images.html: Click this link to open the web page in a new tab of your web browser. Right-click anywhere in the web page and choose View Page Source from the context menu displayed.   Next, right-click anywhere on the web page source and choose Save as... (Chrome) or Save Page As... (Firefox) from the context menu displayed.   Save the web page in the bootstrap sub-folder of your websites folder with the name hero-images.html   Ensure the Save as type: dropdown list is set to Webpage, HTML only (*.HTML, *.htm). You can close the browser tab containing the hero-images.html web page.   Your websites/bootstrap sub-folder shown now look as shown below.
• hero-images.css: Click this link to open the stylesheet file in a new tab of your web browser.   Right-click anywhere in the browser window, and from the context menu, choose Save as... (Chrome) or Save Page As... (Firefox).   Save the hero-images.css stylesheet file to your websites/bootstrap/assets/css sub-folder.   Ensure the Save as type: dropdown list is set to the correct file type.   You can close the browser tab containing the hero-images.css stylesheet.   Your websites/bootstrap/assets/css sub-folder shown now look as shown below.

Downloading your sample images

You will need some sample images to work with. Right-click on the images below, choose Save Image As from the context menu, and download them to your C:/websites/bootstrap/assets/img sub-folder.

Link

Link

Link

Link

Link

 

You have now saved the all the 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-images.html web page. You can see it that all the hero sections have a gray-coloured background.
2. In VS Code, open the hero-images.css stylesheet.
3. For the hero-6 styles, replace the current background-color property and value with the following:

      .hero-6  {
         background-image: url('../img/hotel-dark.jpg');
         background-position: center center;
         background-size: cover;
         background-repeat: no-repeat;
     }

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, replace the current background-color property and value with the following:

      .hero-7  {
         background-image: url('../img/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.

Note: The three dots ... simply refers to all the other styles for the CSS selector.

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('../img/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, replace the current background-color property and value with the following:

      .hero-8  {
         background-image: url('../img/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('../img/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, replace the current background-color property and value with the following:

      .hero-9  {
         background-image: url('../img/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('../img/hook-head.jpg'); 
       }
   }
   
   /* Mobile - Background image  */
   @media (max-width: 767px) { 
       .hero-9 { background-image: url('../img/hook-head-mobile.jpg'); 
       }
   }
   

2. Save the stylesheet and view the effect on the web page on desktop/laptop and mobile size screens.
   
   

Success!. You have now completed this Tutorial.

You can see an example of the finished web page at the link below.

Uploading your Bootstrap folder to GitHub

Follow these steps below to upload your entire Bootstrap folder to your website 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 name of the repository (‘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, click the Add file button near the right of the screen and choose Upload files from the dropdown list.
4. In File/Windows Explorer, select your bootstrap folder, and drag-and-drop it to your repository on GitHub.
5. 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 entire bootstrap folder and all the files it contains.

Your uploaded web page is published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/bootstrap/hero-images.html

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