Jump to content

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

Recommended Posts

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


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:



graphic designer



capsa hero images 1.jpg

capsa hero images shop.jpg

capsa mobile view.jpg

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.