How to have 2 sections share the same background image

Site URL: https://flatworm-sawfish-bgzs.squarespace.com/

Password :: Flathead22

On the 'criteria' tab I want to have the upper section and bottom section share the same background image. How do I do this?

Would something like the following work?

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.

I can't figure out how to find the image url, additionally I am looking to put it on a different page. I don't want it on the accordion on the opening page but on the criteria page, I'm not sure if that changes the custom css.

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.

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

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.

This still isn't solving my issue fully. All I can seem to get it to do is be using the same image as a background. I want the same background to be shared between the 2 sections smoothly. Is that different code?

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.

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.

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.

It appears to me to be the effect you described.

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.

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.

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.

Understood. I did not think about legibility. Thank you so much for all your help and explaining to me. Is it any cleaner on the Criteria tab? That is where I really need the effect.