[Resolved] Header Image

[John]

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!

[John]

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.

[Leo]

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; 
}

[John]

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;
}

[Leo]

No problem 🙂

[Author]

Posts