Jump to content

Adding background image to Gallery Section in 7.1

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. 
Or send to forum message

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

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

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

If you compare what you have to what I posted you'll notice that your curly brackets are messed up. In addition you have two URLs for the background image. Only one will work.

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

@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 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
  • 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 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
  • 1 year later...
6 hours ago, georgiez said:

Hi @tuanphan happy new year!

Is there a way to change the background of a gallery section but instead of an image, change it to the built-in art that Squarespace provides?

Hi. I don't know this. It looks like not possible

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

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.