How To Display Different Header Background Images On Different Pages

In this tutorial I show you how to display different Header background images on different pages, offering two different solutions based on the tools used and your own preference. I also show how to display the logo image to the far left of the page based on a member’s request so you can take or leave that bit of info as needed.

Tools Used:

Note that the first solution is pure CSS/HTML based and therefore can be done with any theme or Plugin, but the second solution requires either my Dynamik Theme or either Extender Plugin.

Here’s a code example used in this tutorial for the pure CSS solution:

.header-one-page .site-header {
background: #FFFFFF url(images/header-1.png) top center no-repeat;
}
.header-two-page .site-header {
background: #FFFFFF url(images/header-2.png) top center no-repeat;
}
.header-three-page .site-header {
background: #FFFFFF url(images/header-3.png) top center no-repeat;
}

Here’s the screencast:

Leave a Reply