Check out the front page to see this in action. This style of parallax works great as a front-page “Hero Image”. It’s coded with just some CSS. It does however require you to make some coding changes to the template, and because your template file WILL be different from mine you should only do this if you understand the code enough to make the relevant changes. In this tutorial, we will be making all the changes in the front-page.php file. Your theme may not have this file… If that is the case I would recommend copying the index.php file and renaming the copy as “front-page.php” this template affects ONLY the main page. Remember to copy this into your child theme folder.
Source a cover image for the Parallax Header
Firstly, find yourself a great cover image. Some space on the left, right, or center of the image will allow you to have a clutter-free area for the text and button. Check out Pexels, Unsplash, and Pixabay who each offer free stock images or illustrations that might work for your needs., I personally LOVE vectorstock.com – you can get quality illustrations (with .ai .eps .jpeg versions of each file and it costs just $1 per image if you buy a credit pack) Vector stock is where I downloaded the image on our front page if you wanted to use the same one.
You will likely need to make a few changes to the image, we will be using the CSS “cover” which makes the image always display at 100% width, this causes the image to be cropped, sometimes significantly when viewed on different sizes of screen. Make sure the main focus of the image is near the center or slightly offset if you plan on having text on the left or right side of the image. Also make sure a good portion of the edges is background, or un-important enough that cropping will not matter. Have a look at the rough example below.
Add the HTML Structure
Next, we are going to create the HTML structure. Load up the front-page.php file. Your file is likely different from mine, so you may need to adjust this a little, lets take it slowly, first off look at the template for the function that calls in the header template. It will look like this :
<? get_header(); ?>This outputs your header and your menu – immediately below this we want the parallax hero section, paste this code making the relevant changes to the text. Warning: your template file may have extra logic and PHP code, you will need to find the right place to put this code in your own setup.
<div class="paralax-a">
<header id="para">
<div class="hero-text">
<h1>TheWPGeek.com</h1>
<p>Web Development - with a focus on WordPress</p>
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link">Learn to make this Parallax Header.</a></div>
</div>
</header>
The observant among you will notice that this code does not close the initial <div> tag. This will need to be closed AFTER the content on the page has been output. In the same front-page.php file you will find some code that looks like this :
<?php
get_footer();Just above that, we need to close out initial <div> so it will now look like this :
</div>
<?php
get_footer();Now we need to load up the style sheet, usually style.css in your child theme folder.
Add the CSS code
Before we paste this code take a look at your front-page.php file, and see what your theme has named the <main> tag, here is mine :
<main id="primary" class="site-main">if you do not have an id, add one called primary (id=”primary”).
.paralax-a {
height: 200vh;
max-height: 100%;
overflow-x: hidden;
perspective: 1px;
perspective-origin: center top;
transform-style: preserve-3d;
padding: 0 40px;
}
#para {
height: 50vh;
background: url("/wp-content/uploads/2021/06/hero-copy.jpg");
background-size: cover;
background-position: center center;
position: relative;
vertical-align: top;
transform-origin: center top;
transform: translateZ(-1px) scale(2);
box-shadow: rgba(0, 0, 0, 0.6) 0px 30px 50px -12px inset,
rgba(0, 0, 0, 0.6) 0px 15px 32px -18px inset;
background-color: rgba(255, 255, 255, 1);
}
#primary {
height: 100%;
background: white;
transform: translateZ(0);
padding: 10px 0;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
color: white;
}Upload the hero image to your media library, and then copy the url and paste it into the stylesheet replacing this :
background: url("/wp-content/uploads/2021/06/hero-copy.jpg");the alignment of the text is controlled by this in the .hero-text CSS
left: 70%;30% pushes it to the right, 50% will align to the centre. For my image 70% aligned the image perfectly for my needs.
Notes
As this CSS code is not used elsewhere on the site you could also add it to the page itself.
As my text is not directly in the middle it does not work well on small screens, we will need to add a media query to either centralize the text or resize accordingly. For me, text in the middle does not work as it becomes cluttered with the image, I made the decision to remove the text completely from the image. A better solution would be to use a grid layout for the text, and a media query to change the column layout for small screens.
@media only screen and (max-width: 600px) {
.hero-text {
display: none;
}
}