Specific header for heach page?

Is there a way to specify which image to load in the header background for individual pages? Or is a single static or random the only options?

Hello @wezzb,

Please upload an image to your Media Library.

Use the following CSS code to assign that image to specific page.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

.page-id-218 .header-image {
    background-image: url(http://example.com/sydney-pro/wp-content/uploads/2015/03/some-cool-image.jpg) !important;
}

.page-id-218 .header-inner {
    display: none !important;
}

Please note that you have to replace page-id-218 (in both parts of code above) and http://example.com/sydney-pro/wp-content/uploads/2015/03/some-cool-image.jpg with your own values.

You can find the class with page ID by viewing the source code of a page in browser an find this line:

<body class="home page page-id-218 page-template…

page-id-218 is a class with your page ID.

You can copy image URL when click on previously uploaded image in Media Library, it’s in URL field on the right side of the screen.

Also please note that it will be shown only on desktop view (1025px of width and more).

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.