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.
