Solved

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

Careys
New Member
6 0 0

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.

Capture1.JPGCapture2.JPG

 

Capture.JPG

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2127 608 474

This is an 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;
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 9 (9)

ThePrimeWeb
Shopify Partner
2127 608 474

Hey @Careys,

 

Can I have the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Careys
New Member
6 0 0

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
Shopify Partner
2127 608 474

Hey @Careys

 

You can share the preview link.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Careys
New Member
6 0 0
Careys
New Member
6 0 0

@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
Shopify Partner
2127 608 474

Hey @Careys,

 

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Careys
New Member
6 0 0

@ThePrimeWeb - Password to site now removed. 🙂

ThePrimeWeb
Shopify Partner
2127 608 474

This is an 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;
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Careys
New Member
6 0 0

@ThePrimeWeb 

 

Thanks for the help. Fix worked.