Options for using Background image as full width, responsive and different hero image on every page

Hello Support Staff,

I’m using Pro Builder and I tried 2 different methods to use Background image on the website/mobile that is:

1: Responsive and stretches (expand and contract) based on different resolutions:
I was able to achieve the required sizing and responsiveness of the background image here but I don’t know how to use different image on every page using the following method -

  • I created 2nd Bar (Bar2) under Header Bar Navigation (Bar1)
  • Under Setup, I selected Advanced
  • Under Background Upper Layer, I have uploaded a PNG image with the dimension 3336 x 1000
  • I changed the Size & Position to Contain and Top
  • Under Dimensions I choose the Height 30 VW
  • At last, I removed all the settings for Box Shadow

2: Unique on every page:
In this method I was able to achieve different image on every page, however the image is non responsive, meaning it doesn’t contract if I view that image on the mobile and also the quality of the image is poor on both Mobile and Web.
I used the solutions described here - https://theme.co/apex/forum/t/best-way-to-integrate-a-full-width-header-image-different-hero-image-on-pages/54816/8 (If you have set the page’s template to a blank - no container template, you sections should automatically be fullwidth….)

Here is the link - https://rajivsarna.com/about/

Solutions I’m looking for: I want to use unique Hero Image on every page of my site and it should display whole image in the container and be responsive on any device and look the same across different resolutions.

I would appreciate your solutions for the above issues.

Hi @rajivsarna,

  1. In PRO Header, if you would like a different image on every page, you need to create multiple Headers and assign each header to the corresponding pages.

  1. The same if you are using Revolution slider, you need to create multiple sliders then select the corresponding sider for each page.you

To better understan how background works please refer to the links below


Hope that helps

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.