Use different Header background images in Hydra theme

Hi Wendy-

If you’re interested in creating more dynamic headers without using code, including the ability to use a random image background from a list or even video backgrounds, I’d recommend checking out the Crio Supertheme.

That said, there are a few ways you could do this in Hydra. Probably the easiest way I can think of would be to use each page’s unique ID to use Custom CSS. You’ll need a couple pieces of information to do this.

First, you’ll need each page’s ID. The easiest way to find it is to edit the page, and look in the URL for the part that looks like ?post=123 where 123 is the number of your page ID.

Then, you’ll need the URL for each of the images you’d like to use. You can find this by clicking Edit under the image in your Media Library, where you’ll find a button at the right to copy the URL.

With those two pieces of information in hand, head over to your Customize > Advanced > Custom JS & CSS menu and add a rule similar to this:

body.custom-background.page-id-123 {
	background-image: url('https://url-of-your-image/image.png') !important;
}

Simply replace “123” with your page ID, and the URL in between the single quotation marks.