Archived topic
Header Image
4 replies · Started by John on September 3, 2020
Hi,
On logged-out pages, I'd like to have a header image, instead of a band of color.
I found the following code at this post that pointed me in this direction.
.site-header {
background: url("http://your-image-path.jpg") no-repeat center;
}This works, except that the header image then only shows on the front page, not on other pages that are on the logged-out side of the site. I tried the following but the logged-out header still only appeared on the front page.
body.logged-out.site-header {
background: url("http://your-image-path.jpg") no-repeat center;
}What needs to be changed so that the header image appears on all logged out pages?
Thanks!
I also looked into using the Customizer > Background Images > Header but I didn't see how I could control the image appearing in a logged-out state and not the logged-in state.
Hi there,
Try uploading the logged out image in the customizer, then use this CSS for the logged in users:
body.logged-in .site-header {
background: url("http://your-image-path.jpg") no-repeat center;
}That worked perfectly. Thanks, Leo.
====================
For my future reference...
body.logged-in .site-header{
background: url("http://www.image-path.jpg") no-repeat center;
}
body.logged-in .site-info{
background-color: #fac8b4;
}
body.logged-in .main-navigation, .main-navigation ul ul,
body.logged-in .main-navigation .menu-toggle{
background-color: #fac8b4;
}
body.logged-in .main-navigation .main-nav ul li a {
background-color: #fac8b4;
}
body.logged-in .main-navigation .main-nav ul li a:active {
background-color: #fac8b4;
}
No problem :)
