CSS code for a header image on all pages

bellenesia · Member · Sep 20, 2017 at 7:38 pm
Copy link

Add topic to favorites
Hello,

Can you post the CSS code for a header image that will show on all pages? Thanks in advance.

The blog I need help with is: (visible only to logged in users)
joyinco · Member · Sep 20, 2017 at 8:12 pm
Copy link
Hi there,

Looks like you are using the Twenty Seventeen theme on your site. You do not need to add CSS to have a header image on every page. Just go to Customize > Header Media, and choose a header image from there. Note that the image will be larger on the home page.

For more information about setting up the Twenty Seventeen theme, visit https://wordpress.com/theme/twentyseventeen.
bellenesia · Member · Sep 21, 2017 at 1:53 am
Copy link
Hello joyinco,

Thank you for the reply. What I want to do is keep the header I have on the homepage and have a different one on the other pages. Is that possible without coding it in CSS for every page?
joyinco · Member · Sep 21, 2017 at 5:32 pm
Copy link
Hi bellenesia,

There is not a simple way to use CSS to move the featured image into the header. The header is part of your page template and cannot be changed on individual pages.
thesacredpath · Member · Sep 21, 2017 at 9:26 pm
Copy link
If you want the same image on all pages except for the home page, the following would do that, but you would have to remove all the page-specific CSS rules you currently have now. I just randomly grabbed an image from your media library for this example.
```
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header img {
  visibility: hidden;
}
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
  background: url("https://bellenesia.files.wordpress.com/2017/08/taxi-238478_1280.jpg") no-repeat scroll center top;
}
```
If you wish to have different images on each page, then what you have now is what you will have to do.
bellenesia · Member · Sep 22, 2017 at 8:37 pm
Copy link
Thank you thesacredpath, I will give this code a try and let you know if it worked.
thesacredpath · Member · Sep 22, 2017 at 9:12 pm
Copy link
You are welcome.
bellenesia · Member · Sep 26, 2017 at 2:44 am
Copy link
Hello thesacredpath,

The code worked, thanks again for your help.
kathrynwp · Staff · Sep 26, 2017 at 3:15 pm
Copy link
Glad that did the trick! Feel free to start a new thread if you need further help.

No items found.