At the end of this Tutorial you will be able to:
In the Hero Blocks with Images Tutorial, you learnt how to add a background image to a hero block, add a shadow effect to the hero text, and include a tinted overlay behind the hero text and in front of the background image.
Background images differ from regular images on a web page:
But what if you want to set different background images on different web pages – when all the web pages use the same styesheet? How can that be done?
For each page, however, the background image is different. Yet all three pages are controlled by the same global.css stylesheet file.
The solution is to set the background image within a <style> ... </style> tag pair in the head section of each web page.
Below you can see the example from the head section of the WordPress page.
In summary, to set a different background image on an individual web page:
To make the hero text easier to read against the background image, there is an overlay in front of the image and behind the heading and sub-heading. In the WordPress page example above, its value above is set to 0.3.
Depending on your chosen image, you may want to make the overlay:
Also in the WordPress web page example above, the overlay color is set to black (0,0,0).
Alternatively, you could apply a colour tint to the overlay by changing this to another RGB colour value. For example, to red (255,0,0) or blue (0,0,255).
The vertical (top-bottom) and horizontal (left-right) spacing within the edges of the hero block is set for all web pages by padding values in the global.css stylesheet.
However, depending on the amount of text within the h1 and h2 headings, you may want to change this slightly in the head of each web page – for large screens, on mobile screens or on both.
All properties of the h1 heading and h2 sub-heading in each hero block are set in the global.css stylesheet.
Depending on the amount of text within the heading and sub-heading, you may want to increase or decrease their font sizes on large and/or mobile screens.
You can also change the font colour and weight (normal or bold).
Unlike background-images, background videos are set directly in the HTML of a web page.
Below is the HTML of the template 'home page' which contains a background video and a 'poster' image which displays until the video is fully downloaded into the user's web browser.
To use a different video and poster image, link to the new file names as shown in the HTML above.
Both the background video and poster image files are stored in your assets/videos sub-folder.
As with background images, background videos can also have a tinted overlay. In the website template 'home page', the overlay has a slightly blue tint colour that is darker at the top of the hero block than at the bottom.
Change the overlay tint colour and opacity according to your chosen colour scheme.
If you want to use a different background video, you will need to create a new 'poster' image for it. This is the image that will display until the video has finished downloading and is ready to play.
There are the main steps involved:
Follow the steps below.
You should see only the video, without any heading text or buttons in front of it. Also, because the video is not playing, your web browser displays only the first frame of the video.
Your next task is to create the image you will use as the 'poster' for your new background video.
You will want your poster image to have the smallest possible file size, so that it will load as quickly as possible on the user's screen.
Now that you have captured, edited and compressed an image of the new video's opening frame, you can link to it in the HTML of your hero block.
In the example below, the poster image is named hero-video-poster-new.jpg
Also, add the autoplay attribute back to the video tag.
And remove the comment tag pair that surrounds your heading, sub-heading and buttons.
Save your web page, reload it in your web browser, and verify it displays correctly on both large and mobile screens.
There is one further step you can take to ensure the poster image loads as quickly as possible on your user's device.
In VS Code, add the following line in the head section, just under the description meta tag.
<link rel="preload" href="assets/videos/hero-video-poster.jpg" as="image">
This line will load the poster image before any other elements of the web page.
Replace the file name hero-video-poster.jpg with whatever is the name of the poster image on your 'home' page.
Also ensure you have set the correct sub-folder location for the poster imege – on your website, you might have placed the image in either the assets/img or assets/videos sub-folder.
To get your background video to play on Apple mobile and tablet devices, you will need to add a few more attributes to the opening video tag in the hero block of your web page.
Without these extra attributes, your opening video tag looks like this:
<video loop muted autoplay poster="assets/videos/hero-still.jpg" class="background-video">
In the example above, the file name of the poster image is hero-still.jpg. And the file is in located in the assets/videos sub-folder.
For Apple devices ,you need to add some new attributes as follows:
<video loop playinline muted autoplay poster="assets/videos/hero-still.jpg" class="background-video" disablepictureinpicture preload="auto">
As you can see, the new attributes of the opening video tag are: playinline, disablepictureinpicture and preload="auto".
You can copy-and-paste the above into your index.html web page, to replace the code already there.
See the example below.
Ensure that both the poster file name and poster sub-folder file location are correct for your website.
NOTE: On Apple mobiles and tablets, a background video will play only if the user has not turned on battery-saving, lower-power mode. If battery-saving is on, the user will see only the poster image and never the background video.
The final step is to upload your website pages and folders to GitHub.
Your web pages are now published on GitHub. Your Home page has a web address similar to the following, where username is the username you have chosen for your GitHub account:
It may take a few minutes for your uploaded files to appear on GitHub.
Return to Contents.