# Custom Header Images on Pages

**URL:** <https://colorlibsupport.com/t/custom-header-images-on-pages/24236>\
**Category:** Pixova Lite\
**Created:** [August 4, 2019, 8:51pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236 "2019-08-04T20:51:17Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 4, 2019, 8:51pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/1 "2019-08-04T20:51:17Z")

</div>

I’m trying to implement custom header images on individual pages. I’ve read conflicting responses here: first that custom images are only available on the Pro version of Pixova, then that there is no Pro version. I’ve also tried implementing them manually in section-header-page.php with success…except that handling for responsive image sizes gets very cumbersome. My site is [http://brittanykoepp.com](http://brittanykoepp.com).

Thanks.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 5, 2019, 7:16am UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/2 "2019-08-05T07:16:56Z")

</div>

Hey there

I can confirm that there is no Pro version of the Pixova lite 🙂  
I see you did partially resolved your problem but can you tell me what is the problem on the mobile devices? I can see images are appearing normally on mobile devices [http://brittanykoepp.com/services/](http://brittanykoepp.com/services/)

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 5, 2019, 12:45pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/3 "2019-08-05T12:45:59Z")

</div>

The image appearing on mobile has been the same header image as the Home page. What I’m wanting to do is have different header images on each of the other two pages. I’ve _just_ updated section-header-page.php (around line 61) to check for specific pages by page\_id, like:

```auto
$this_page_id = get_the_ID();
// /services
if ( $this_page_id == 2) {
	echo '<div class="parallax-bg-image" data-image-source=' . get_site_url() . '/wp-content/uploads/2019/07/cropped-blonde.png"></div>';
}
// /about
if ( $this_page_id == 100) {
	echo '<div class="parallax-bg-image" data-image-source=' . get_site_url() . '/wp-content/uploads/2019/07/cropped-platinum.png"></div>';
}

```

That works well for desktop, but the image doesn’t show on mobile. So, I guess I’m looking for (1) how to manually code for mobile or (2) change Page header images via the GUI (it’d be awesome if setting Featured Image would do this).

Thanks.

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 5, 2019, 1:06pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/4 "2019-08-05T13:06:29Z")

</div>

Attaching a screenshot of inspector of iPhone rendering…

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 6, 2019, 3:09pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/5 "2019-08-06T15:09:43Z")

</div>

Good evening

There is a better way to achieve this by css 😉

try this code, use it in appearance \> customize \> additional css:

/_Services page bg_/  
.page-id-2 #intro {  
background-image: url(“[http://brittanykoepp.com/wp-content/uploads/2019/07/cropped-blonde.png](http://brittanykoepp.com/wp-content/uploads/2019/07/cropped-blonde.png)”);  
}

/\* page bg\*/  
.page-id-XX #intro {  
background-image: url("");  
}

Instead of XX you need to use the ID of your page  
Let me know if it worked

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 6, 2019, 3:39pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/6 "2019-08-06T15:39:53Z")

</div>

The CSS solution works great. Thank you! As a note, however, I still needed to comment out the following code in section-header-page.php. With it in place, even using !important on the custom CSS, the Home page header image would still appear on the Pages in mobile.

```auto
//	if ( get_header_image() !== '' ) {
// echo '<div class="parallax-bg-image" data-image-source="' . get_header_image() . '"></div>';
//	} else {
// echo '<div class="parallax-bg-image" data-image-source=' . get_template_directory_uri() . '/layout/images/header-bg.jpg"></div>';
//	}

```

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 7, 2019, 4:44am UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/7 "2019-08-07T04:44:02Z")

</div>

Good morning wileykoepp

Well, I still don’t suggest to edit PHP files just for this, 🙂 CSS can handle them,

lets tweak your code little bit, please add this rule in the code:

background-size: cover;

final code is like this:

.page-id-XX #intro {  
background-image: url(“”);  
background-size: cover;  
}

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 7, 2019, 3:34pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/8 "2019-08-07T15:34:44Z")

</div>

Agreed that editing the theme files directly is a bad practice. A pure CSS solution is preferrable.

However, when I uncommented the theme file and added background-size:cover: to each page’s custom css, the Home page header replaced the custom image (again, on mobile only). That is the state of the code now if you want to take a look. I also tried adding !important to each line of custom css, but that did not affect the Page header image on mobile.

Thanks for your continued help with this!

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 8, 2019, 4:21am UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/9 "2019-08-08T04:21:49Z")

</div>

Good morning

Ok, now i see it, finally 🙂

Let’s make one change to CSS for homepage:

.home .parallax-bg-image {  
background-image: url([http://brittanykoepp.com/wp-content/uploads/2019/07/cropped-blonde.png](http://brittanykoepp.com/wp-content/uploads/2019/07/cropped-blonde.png)) !important;  
background-size: cover;  
}

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 8, 2019, 1:17pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/10 "2019-08-08T13:17:35Z")

</div>

I made that change, but it didn’t impact the Pages’ header image on mobile. Those still match the Home page’s header image on mobile. But, that did help! Instead of the .home class, using the class of the page does it. So I removed all other custom CSS and left the template as-is. Then in Additional CSS just need to add the following for each Page:

```auto
.page-id-PAGE_ID .parallax-bg-image {
background-image: url(http://domain.com/wp-content/uploads/path-to-image.png) !important;
background-size: cover;
}

```

That covers both desktop and mobile. Thank you for taking the time to work through this!

---

<div class="post-metadata">

**Author:** ![wileykoepp](https://colorlibsupport.com/user_avatar/colorlibsupport.com/wileykoepp/32/1014_2.png) [@wileykoepp](https://colorlibsupport.com/u/wileykoepp)\
**Post date:** [August 8, 2019, 2:13pm UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/11 "2019-08-08T14:13:47Z")

</div>

Actually, that last CSS does get the custom images on Pages, even on mobile. But on Desktop, as you scroll-up, the Home header image ‘peeks’ out from the bottom of the header image. The custom-css image ‘catches up’ and covers the Home header image after a second, but you see it nonetheless. It’s as if the custom css needs to catch up with the site’s default parallax css. The only way around this that I can find is to comment out the header-image lines in section-header-page.php. I know that’s not the best approach, but I’ve spent days trying to get a solution in place and it’s not important enough to continue to work on. I’ll just comment out those lines in the future if/when I update the theme.

If/When there is a theme update, I wonder if there could be a minor tweak to these lines…

```auto
if ( get_header_image() !== '' ) {
	echo '<div class="parallax-bg-image" data-image-source="' . get_header_image() . '"></div>';
} else {
	echo '<div class="parallax-bg-image" data-image-source=' . get_template_directory_uri() . '/layout/images/header-bg.jpg"></div>';
}

```

…where an additional conditional is added, so that if there’s a Feature Image on the Page entry, it gets used as the Header Image. Otherwise its defaults to Home header, then the theme’s default header image (as is currently the case).

Thank you again for your help.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 9, 2019, 4:31am UTC](https://colorlibsupport.com/t/custom-header-images-on-pages/24236/12 "2019-08-09T04:31:01Z")

</div>

Good morning

The last CSS will work only for homepage 🙂 it can not be used for pages, yes you can use .page selector but it will select all your pages, so, you still need to use page id based selector for pages and .home for homepage

No, problem let me know if you still have any questions 🙂