Adding a background image into carousel caption text block

Site URL: https://cyan-sailfish-ljdz.squarespace.com/

Hey there,

I'm trying to add watercolor background images into the caption text box of my carousel. Please see current one vs what I'm trying to achieve in the attachments (photoshopped).

I cannot code at all so would really appreciate the help! 

Thanks, Red

Hi. What is password?

Hi,

Thanks for getting back to me. It is:

Password: ciara123 (lowercase c)
 

Many thanks

Red

Anyone got any ideas?

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.

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

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

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

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