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:
- Genesis Framework
- Dynamik Website Builder (but either Extender Plugins will work as well, or ANY theme/tool is fine if only using the first solution which is pure CSS/HTML based)
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:
Follow & Share:
