Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Adding background image to Gallery Section in 7.1


Fiiona

Recommended Posts

  • 4 months later...

Hello! I am trying to recreate an old website in Squarespace 7.1. I need to remove padding from the banner so the background image and the overlaid image are aligned. Here is how it is set up on the old site. Can anyone help with this? The attached image is how the banner and image should align.

 

Screen Shot 2021-03-12 at 9.38.33 AM.png

Link to comment
  • 3 weeks later...
On 3/12/2021 at 9:40 PM, BKCO said:

Hello! I am trying to recreate an old website in Squarespace 7.1. I need to remove padding from the banner so the background image and the overlaid image are aligned. Here is how it is set up on the old site. Can anyone help with this? The attached image is how the banner and image should align.

 

Screen Shot 2021-03-12 at 9.38.33 AM.png

Hi. Can you share link to page in screenshot? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 5 months later...

@jamescassidy01

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Add the following to Design > Custom CSS.

/* background image for gallery */

[data-section-id="[enter data section id here between double quotes]"] .section-background {

  background-image : url([enter image url here between parenthesis]);
  background-position : center;
  background-size : cover;
  
  }

This is for a v7.1 site.

Enter your data section id and the url for the background image you want to use. Your data section id currently is 6142316ab17d182a030e46e9.

To get the data section id check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 9/17/2021 at 2:47 AM, creedon said:

Add the following to Design > Custom CSS.

/* background image for gallery */

[data-section-id="[enter data section id here between double quotes]" .section-background {

  background-image : url([enter image url here between parenthesis]);
  background-position : center;
  background-size : cover;
  
  }

This is for a v7.1 site.

Enter your data section id and the url for the background image you want to use. Your data section id currently is 6142316ab17d182a030e46e9.

To get the data section id check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

I'm getting a syntax error on line 3, any chance you know what I've done?

 

image.thumb.png.3841a67ea46c704a556d8cb3d4701820.png

Link to comment

@jamescassidy01

Try the following.

/* background image for gallery */

[data-section-id="6142316ab17d182a030e46e9"] .section-background {

  background-image : url(https://images.squarespace-cdn.com/content/v1/5e1db6aef82d2431043b8858/ed7584a4-83ee-49e2-9718-e81159f1e4aa/ice-cream-seamless-pattern-on-white-vector.jpg);
  background-position : center;
  background-size : cover;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...

@rishisamuelpatel

Add the following to Design > Custom CSS.

/* background image for gallery */

[data-section-id="615a4b36040d455a1a52fa5d"] .section-background {

  background-image : url(https://images.squarespace-cdn.com/content/v1/5e1db6aef82d2431043b8858/ed7584a4-83ee-49e2-9718-e81159f1e4aa/ice-cream-seamless-pattern-on-white-vector.jpg);
  background-position : center;
  background-size : cover;
  
  }

Be sure to replace the background image url with your own.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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