Jump to content

Adding background image to Gallery Section in 7.1

Recommended Posts

Posted

Hi

Does anyone know how to add a background image to a gallery section?

There's options to change the theme styles, but none to add a background image like the other sections.

Thanks!

  • 4 months later...
Posted

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

  • 3 weeks later...
Posted
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!)

  • 5 months later...
Posted

Hi all. I need to blend a background behind a gallery but cannot seem to do so, or add any photo behind the gallery. I have tried custom codes but with no change. Any chance you can help? (Trying to get rid of white section around gallery photos) image.thumb.png.de8da974ba7ff0f3d2b3163156ce59bb.png

Posted

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

Posted (edited)

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.

Posted
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

Posted

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

Posted
On 9/19/2021 at 7:53 PM, creedon said:

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

Corrected, yet still receiving syntax erroron line 3 

 

 

image.png

Posted

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

  • 3 weeks later...
Posted

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

  • 1 year later...
Posted
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!)

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.