Header section::display of different images on different pages


Is there possibility of displaying different images in different pages in the header section

if yes, how to achieve that?


Dear Ashwin,

Thank you for asking.

That objective is possible to accomplish because each page has a unique body class. You can set different image by applying CSS code targeted for specific page. For instance the following CSS code:

.page-id-34 .header-image{
  background-image: url('http://yoursite.com/path/to/image.jpg');

The code above replaces the header image of your “About Us” page. It has page Id 34.

You can apply custom CSS code above through the Simple Custom CSS plugin or child theme’s style.css.

To find the page ID, go edit your page. Take a look at the browser’s address bar. You will see something like:


From the URL above, the page ID is 2.

I hope this reply helps.