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.
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.
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.
In this section, you will add a background image to the hero-6 block within your sample files.
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.
In this section, you will add a background image to the hero-7 block within your sample files.
hero-7 { ... background-image: url('bike-tours.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
To make the text easier to read against the background image, let's add a shadow effect to the heading and sub-heading.
hero-7 h1 { ... text-shadow: 2px 2px #222; }
hero-7 h2 { ... text-shadow: 2px 2px #222; }
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.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url('bike-tours.jpg');
In this section, you will add a background image to the hero-8 block within your sample files.
hero-8 { ... background-image: url('meeting.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
To make the text easier to read against the background image, let's add a shadow effect to the heading and sub-heading.
hero-8 h1 { ... text-shadow: 2px 2px #222; }
hero-8 h2 { ... text-shadow: 2px 2px #222; }
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.
background-image: linear-gradient(rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url('meeting.jpg');
In this section, you will add a background image to the hero-9 block within your sample files.
hero-9 { ... background-image: url('hook-head.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; }
To offer a different image for mobile screens, follow these steps.
/* 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'); }
Click hero-bg-image.html to view a finished sample of this web page in a new tab of your web browser.
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.