You can add some additional CSS rules to the “Additional CSS” section of the WordPress theme customizer in order to set specific header images for certain pages or posts on your site.
By default, the Mason TwentyTwenty theme provides a selection of header images. On each page load, one image from this set will be randomly chosen to appear as the header image.
Using the WordPress theme customizer, you can instead specify a single, specific image to use as the standard header image. In this case, this specified image will be used on all pages across the site.
In either case, you can add some additional CSS rules to the “Additional CSS” section of the WordPress theme customizer, in order to set specific header images for certain pages or posts on your site.
To do this, you will need to know the WordPress ID number for the page/post in question. You will also need to have uploaded your desired header image and to know the URL of the uploaded image.
Once you have done this, you can add a line of code based on one of the following examples to the “Additional CSS” section of the theme customizer.
This page has implemented this technique to display a unique header image shown on only this page.
For Pages:
/* override header image on specific page */
body.page-id-2229 header#site-header {background-image:url('/wp-content/uploads/2021/10/orange-geometric-1500-overlay.jpg') !important}For Posts:
/* override header image on specific post */
body.postid-2229 header#site-header {background-image:url('/wp-content/uploads/2021/10/orange-geometric-1500-overlay.jpg') !important}Since the current page we are viewing represents a WordPress post, we have used the post example above to modify the header image shown on this page.
To implement this example code to work for your case, you will have to:
- Determine if the page in question represents a WordPress page or post, and select the appropriate example code above;
- Replace the ID number specified in the example code (“body.postid-2229”) with the WordPress ID number of the page/post you want to change the header on;
- Replace the image URL specified in the example code (“/wp-content/uploads/2021/10/orange-geometric-1500-overlay.jpg”) with the URL of the image the you want to use.