How can I remove a repeating photo from my Craft Theme Slideshow?

[Careys]

Hi All

I've got a bit of an issue. I can't seem to work out how to remove the photo in the middle of the slideshow. Each slide has the same photo which is the site background image.

Any clues / ideas on how to remove it I would be grateful for.

I have added how I have each photo configured in the slideshow.

[ThePrimeWeb]

Hey @Careys,

Can I have the link to your store?

[Careys]

Hi

The store isn't live at the moment as it is still in development as we are working through text and images etc with the client.

[ThePrimeWeb]

Hey @Careys

You can share the preview link.

[Careys]

Preview Link.

Carey's Joinery – Carey's Joinery (careysjoinery.co.nz)

[Careys]

@ThePrimeWeb - Have you had any luck viewing the website via the Preview link? If not, please let me know how to contact you directly and I'll send additional details.

[ThePrimeWeb]

Hey @Careys,

Sorry flooded notifications. The store is password protected. Could you share the password or just disable it until I check the issue?

[Careys]

@ThePrimeWeb - Password to site now removed. 🙂

[ThePrimeWeb · Accepted solution]

Hey @Careys,

I see you added this code in the base.css file

.gradient {
  background: var(--gradient-background);
  background-attachment: fixed;
  background-image: url(https://cdn.shopify.com/s/files/1/0847/1445/5351/files/IMG_1817.jpg?v=1701642808) !important;
  background-color: transparent !important;
  background-position: center !important;
  background-color: #000000 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

You should change the selector from .gradient to .gradient:not(.slideshow__text)

Final code should look like,

Note: Everything within the curly braces {} are the same

.gradient:not(.slideshow__text) {
  background: var(--gradient-background);
  background-attachment: fixed;
  background-image: url(https://cdn.shopify.com/s/files/1/0847/1445/5351/files/IMG_1817.jpg?v=1701642808) !important;
  background-color: transparent !important;
  background-position: center !important;
  background-color: #000000 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

[Careys]

@ThePrimeWeb 

Thanks for the help. Fix worked.