Jump to content

Adding a background image into carousel caption text block

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 12/15/2021 at 6:03 PM, LittleRed123 said:

I'm trying to add watercolor background images into the caption text box of my carousel.

You can do this with some CSS by specifying the background-image property of the list-item elements. First, you'll need to add your image to Squarespace and find the URL of the image. Next, you can go to Design > Custom CSS and add something like this:

.user-items-list-carousel .list-item[data-is-card-enabled="true"] {
  background-image: url(//images.squarespace-cdn.com/content/v1/6189143…/1639586205886-9E2QOW34D0ZVKIYZ4TQW/TheWeekend.jpg?format=500w);
  background-repeat: no-repeat;
  background-size: cover;
}

To demonstrate, I've used 'The weekend' image from further down the page, but you can replace this with the url of your image.

1487950531_Screenshot2021-12-18at11_55_36.thumb.png.9bf189f483133494e4b064372013a0b2.png

 

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hey Paul,

Thanks so much for your help. So I've applied your code with an image and it seems to zoom/crop into it a lot. Please see attached.

Ideally I would like to:

1) Have different images on the 3 elements (as opposed to the same one across all)

2) Have it not zoom in on the image but closer to the format I have exported it as.

The image URLS are:

Tab1: https://images.squarespace-cdn.com/content/61891432011ecd51f01b3f8d/1639590488186-MGAJ7OFDXU1E1PHJJVNO/Tab1.jpg?content-type=image%2Fjpeg

Tab2: https://images.squarespace-cdn.com/content/61891432011ecd51f01b3f8d/1639829890442-ASVB1X8XIU3WFSSTZFFZ/Tab2.jpg?content-type=image%2Fjpeg

Tab3: https://images.squarespace-cdn.com/content/61891432011ecd51f01b3f8d/1639829890442-ASVB1X8XIU3WFSSTZFFZ/Tab2.jpg?content-type=image%2Fjpeg

Thank you so much for your help and sorry for being completely useless!

Red

 

 

 

 

 

 

Screenshot 2021-12-18 at 12.18.53.png

Link to comment
38 minutes ago, LittleRed123 said:

I've applied your code with an image and it seems to zoom/crop into it a lot.

Thank you so much for your help and sorry for being completely useless!

No problem! We're here to help each other 🙂.

There are some limitations because you're adding the image to an existing element within Squarespace, and you can't change many of the built-in properties without causing issues. However, you should be able to adjust the size of your image and edit some of the image properties such as background-size to achieve what you need. It may take some trial and error.

For example:

.user-items-list-carousel .list-item[data-is-card-enabled="true"] {
  background-image: url(https://images.squarespace-cdn.com/content/61891432011ecd51f01b3f8d/1639829890442-ASVB1X8XIU3WFSSTZFFZ/Tab2.jpg?format=300w);
  background-size: 100% 60%;
}

...will produce this...

241704241_Screenshot2021-12-18at13_27_18.thumb.png.f3f694b2d58d957d78b478eee3ec8473.png

or

.user-items-list-carousel .list-item[data-is-card-enabled="true"] {
  background-image: url(https://images.squarespace-cdn.com/content/61891432011ecd51f01b3f8d/1639829890442-ASVB1X8XIU3WFSSTZFFZ/Tab2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

would produce this...

611755558_Screenshot2021-12-18at13_24_37.thumb.png.fb9c27dea012db309fbc2df617d28df1.png

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.