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.
Thanks.
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/
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:
$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.
Attaching a screenshot of inspector of iPhone rendering…
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”);
}
/* 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
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.
// 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>';
// }
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;
}
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!
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) !important;
background-size: cover;
}
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:
.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!
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…
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.
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