Best solution for TWO Hero images + centered white headline on top, over split.

Site URL: https://www.capsaparis.com/

Hello!

My client wants a split image as hero on the index page, with a white headline over.

For now I have just created a split image in photoshop and uploaded as a full bleed background.

It looks tolerable for now – but I want to make it the right way, and get better control over mobile view.

So that I can get the center right –
I tried moving the background image focus point for mobile view but that moves it for desktop aswell.
I haven't found a way to keep the split in the center AND customize the mobile view so one of the images is in focus, not the center of the split.

If centered on desktop view it shows only the middle (the split part) on mobile

And if the focus point is set best for mobile – then desktop center is off.


Until I know how to do this my client is ok with the present solution
But it would be so much easier if it worked as a gallery but looked the same.
Especially when adjusting for mobile view.


Is using a gallery with 2 images and adding code to get a headline over them the best option? 
If so how?

We like the look of full/inset aswell. It is not necessary to have full bleed if there are good solutions with such limitations.
The most important thing is to get the split to be in the center and to get the headline over them.

Right now I am using the background with the tilt effect – but this tilt effect is not necessary if too difficult.

Also looking for ways to do this with 3 images,
– but mainly with 2 images – at this point.

Aim is to build it so that my client can manage updating images herself.

Any suggestions? 

This is the site:

https://www.capsaparis.com/


Maria 

graphic designer

www.mariakask.se


 

If your site support Index Page, you can add 2 sections 

Section 1 with Image + text

Section 2 with image only

Then we will give the code to achieve layout