Change Header Image per Page

  • Resolved Robin

    (@quadratblick)


    5 years, 3 months ago

    Hi Nicolas and Team!

    First off: Your theme is amazing. I searched for a long time for one that lets me edit the CSS, is lightweight, very customizable and fast. Thank you very much for making it available for free!

    Now to my request (that sounds like an order, but really, it is just a wish and an idea for you – after all, your theme is free):
    I want to use a different header image on each Page on my website. I know, there are ways. But every way I knew to search for had its problems. That is why I have the following extra requests:

    – I want to keep my website as light as possible and thus do not want to use Elementor just for this.
    – I want the header + menu to look just the way I have it set up now – with the Top Menu style.
    These are the two reasons why the Custom Header hasn’t been an option for me. (As far as I know at least…?)
    – I want to use caching with WP Super Cache and Fast Velocity Minify. That is why other Plugins based on PHP might be a problem in comparison to HTML, CSS and Javascript.
    – I do not want to randomize the images but really want every Page to have its own specific one.
    – I am talking about the 7 different Pages on my website – not Posts, Tags, Categories or anything like it.

    In a perfect world I could, for example, just choose the Featured Image of a Page to act as the Header Image or choose one Header Image for each Page in the Customizer.

    Best regards! I thank anyone who might help me with that kindly in advance!
    Robin

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    Glad to hear that you like OceanWP. For different header image, there is no page-level setting, but you can use some css to do it – 

    .page-id-2 #site-header {
    background-image: url(https://www.quadratblick.de/wp-content/uploads/Robin-Schneider-von-Quadratblick-Header-3.jpg);
}

    Change the page id and image URL in the code for every page you have. Inspect the page to see the page id in the source code (body class).

    Hope it helps you.

    Thread Starter Robin

    (@quadratblick)

    This was way too easy… and exactly what I wished for. Thank you so much!

    You’re welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Header Image per Page’ is closed to new replies.