Support Forum

RESPONSIVE "PAGE TITLE" BACKGROUND IMAGES

Giora
Giora
Offline
Hi Ivo,

We have been struggling with something for a LONG time and are hoping you can point us in the right direction and put us out of our misery. :(

When we look at how you use the Page Titles particle in templates like Beauty (http://demo.inspiretheme.com/?theme=beauty), we see that the text is responsive but the background image is not. Only the left of the background image displays on phones - which is a problem for many images we want to use and have display on phones (example: https://www.barrecorestudio.com/personal-training).
> We try to solve this by using background-size: cover and text-align: center in the Template Area Styles, but this isn't making our background images responsive and sometimes distorts the image on desktop.

Often we need to have a different background image on each site area (https://www.barrecorestudio.com/contact and https://www.barrecorestudio.com/about-the-studio).
> We solve this by creating different templates for each area just so we can have different banner background images, but this seems inefficient.

Often we don't need text, but just the image to be responsive (example: https://www.barrecorestudio.com/barre-core-classes).
> We solve this by changing the padding of the template areas in our custom css file to control the height of the background page title image on desktop (example: #g-breadcrumb {padding: 12rem 0}), but this causes problems on tablets, phones...

In short, we think our solutions are all incorrect and we're hoping you have better ideas for us.

TIA,
Lisa and Giora
Responses (3)
Sorry, but you are not allowed to view the replies here.
Your Reply

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!