Jump to content

How to have 2 sections share the same background image

Recommended Posts

  • Replies 10
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Would something like the following work?

1330018175_ScreenShot2022-06-07at9_42_38PM.thumb.png.27ec8da007c71af0568efc7b63c9e401.png

Add the following to Design > Custom CSS.

[ enter block id here replacing square brackets ] .sqs-block-content {

  background-image : url( [ enter image url here replacing square brackets ] );
  
  }

To find the block id of the accordion block, check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

This is a little tricky depending on where the image is stored. If it is loaded the way most are onto a SS site and you can see it on a page...

On macOS use the context menu to open the image in a new tab. Grab the URL from the address bar. On Windows I believe you can right-click.

383741843_ScreenShot2022-06-08at1_03_31PM.png.3d9497b6ab9055dd4ed309de56304aaf.png

There is an alternate way of uploading the image if it is a one off type of situation. Manage Custom Files.

1799719255_ScreenShot2022-06-08at1_10_11PM.thumb.png.325408752a5464841be153c38c6beb3d.png

If you read up on how to use that feature it will tell you how to obtain the image URL.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Ah. Apparently I misunderstood the goal. I focused on the accordion block.

Here is a modified version of your code.

[data-section-id="62867e8695cb9a1140835778"] .sqs-layout > .sqs-row {

  background-image: url(https://images.squarespace-cdn.com/content/v1/627964da8235bb33ed214366/242c5dbf-4ef5-4a04-a31f-00a2e8dbdd86/flathead+valley+3.JPG)
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hm, it looks cleaner but it still is just replicating the image on my side. I want it to look like both the accordion and text block above are all 1 section sharing the 1 background image. When I saved that new code you just sent there is a gap between the 2 sections as well as it still just using the same image as the background, not sharing it.

Link to comment
6 hours ago, hudson_lee02 said:

Hm, it looks cleaner but it still is just replicating the image on my side.

This is what I see when I loaded your site just now.

1953738091_ScreenShot2022-06-09at4_41_08PM.thumb.png.a96999899c8da24d8acc9a24826bdf4c.png

It appears to me to be the effect you described.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Perhaps I am wording this poorly I don't know. This picture is what the page currently looks like. If the image was being extended then the tree part would be where the about us is and there wouldn't be all that white space around it. What it seems to be doing is the first section is using this image it as a background, and additionally, the second section is using the same file as it's background. They aren't connected, they just happen to be sharing the same file being used, I want them to be connected and looking they are sharing ONE image. If this is not possible I will have to find something else to do but currently it is not doing that.

image extension.JPG

Edited by hudson_lee02
Link to comment

At this point I'm not going to say I know what you want. 🙂 But let's see if I've gotten a bit closer to understanding.

Are you wanting something like the following? Keeping in mind this is not a solution just an aid in knowing the general idea of the effect you want.

1738592424_ScreenShot2022-06-10at1_06_02PM.thumb.png.e105483fb2374343d2bf3620583a4547.png

I used CSS to manipulate some of the elements to remove their background colors and added the image as a background for the body. As we can see by removing the background color for the sections we've created a new issue. How to deal with making the block elements readable. The removed background colors are what SS uses to accomplish that. There are also other side effects. I think it would be difficult to achieve a clean effect. The way the page is structured, it was not designed to have background images spanning sections.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.