page header image show different picture

dom2sky2019 · Member · Aug 11, 2017 at 9:28 am
Copy link

Add topic to favorites
Hi,
The ovation theme shows header image on every page.
I want each page to have header image in a different picture.
Please help me with the CSS for this. thank you!

The blog I need help with is: (visible only to logged in users)
kalijeeri · Member · Aug 12, 2017 at 2:38 am
Copy link
CSS won’t help you with this if your theme doesn’t provide you required feature. Either look into theme options of try using another theme
thesacredpath · Member · Aug 12, 2017 at 9:19 pm
Copy link
@mayay2010, we can do this with custom CSS. Each page has a unique page id CSS class set in the opening body html tag and we can use that to hide the existing image and insert another one. You can use the web inspector built into your browser to find the page id CSS class. In the following example, I’ve used this page from your site, https://dom2c.com/%e9%9b%bb%e8%a6%96%e5%92%96/, and randomly pulled an image out of your media library.
```
.page-id-272 .wp-custom-header img {
  visibility: hidden;
}
.page-id-272 .wp-custom-header {
  background: url('https://example77285.files.wordpress.com/2017/07/p4-1.jpg') no-repeat scroll top center / cover;
}
```
You can use the above as a guide in creating the CSS rules to replace the header image on other pages.
onwardhouse · Member · Aug 15, 2017 at 5:01 pm
Copy link
Is there CSS that can also hide the header on all pages?
thesacredpath · Member · Aug 15, 2017 at 8:48 pm
Copy link
Hi @onwardhouse, since you are using a different theme (Maisha), and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

No items found.