Jump to content

Creating side by side full bleed images

Recommended Posts

Hi there,

I am wanting to have full bleed image and background color side by side with text on the color background side, much like the Squarespace website: https://www.squarespace.com/

and see see screenshot for area I am referring too.

I am wanting the 2 sides to be separately responsive so that the type is always just on the colour background.

I do not have the coding knowledge to do this. Is there anyone who can help?

Thank you.

Screen Shot 2019-12-11 at 10.00.45 am.png

Link to comment
  • Replies 12
  • Created
  • Last Reply
27 minutes ago, obrienleeanne said:

Hi again,

Is there a way to get the left and right column to stack? If the image is half transparent that means on mobile type runs over half of image...

Thanks for any suggestions

Can you share link to your site with transparent background?

I guess we can use background position attribute to adjust.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Yes, here is the site:

https://clarinet-strawberry-9nzf.squarespace.com/

PW: gracie

You can see I have tried various methods, one being having the banner image half the intended background color (our nannies). The transparent background one shows as black (our goal) as you said in your earlier post. I just need to know if it's possible to stack that left and right sides on mobile.

No stress if not possible! Thank you.

Screen Shot 2019-12-11 at 3.16.24 pm.png

Screen Shot 2019-12-11 at 3.16.14 pm.png

Link to comment
35 minutes ago, obrienleeanne said:

You mean have the text as part of the image block, using maybe card as the design option? I'll try that. ; )

https://forum.squarespace.com/topic/153434-add-button-to-gallery-image/#comment-339735

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 minutes ago, obrienleeanne said:

I used the overlap and it's working well, thank you! Just one last question: Do you know what I can do to get the image to bleed to the bottom of the block (and possibly to the side but that's not an issue really), between the pages, see screenshot.

 

add to Home > Design > Custom CSS

#goal .sqs-block-image {
    padding-bottom: 0 !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.