How to add a unique banner/header image to each page

Shapely
1

Hi There,
I saw a post on adding code to the top of the page to change the header image on individual pages in Shapely.

Can you please provide the code I need to have a unique banner/header image for each page?
basically on the pages at the top level with have different header images:

https://lionspeak.wpengine.com/events/

There may be others, but these are the main ones. Please let me know if you need more info than this.

Thanks ahead of time for your awesome help!!

Molly

2

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

.page-id-48 .header-image-bg {
background-image: url(https://lionspeak.wpengine.com/wp-content/uploads/2018/09/cropped-wine-awards-2.jpg) !important;
}

each page has a unique ID, this is how and where you can get them:

Thanks!
Colorlib Support Team

3

Hi Noda,

Thanks so much for your reply (and sorry for taking so long to respond). I tried the above css but I’m not having any luck. Can you take a look and see what I am doing wrong: https://lionspeak.wpengine.com/events/

For the above Events page I added the following to Customizing > Additional Code: .page-id-58 .header-image-bg {
background-image: url(http://lionspeak.wpengine.com/wp-content/uploads/2018/11/events-heading-2.jpg) !important;
}

But I still see the default banner?

4

Hi Noda, I was able to get the headers to work (only events page won’t - so I just set that to be the default).

I have another question though, can I use that same code to make the heading heights larger? Right now the default is: 225 pixels. I would like to change it to 300 pixels - is that possible?

Thanks! Molly

5

Hello Molly

Yes, this is possible but only by this css:

.page-title-section {
height: 300px;
}

6

Great thanks that worked! :slight_smile:

7

nice :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions Thanks!