Make slideshow gallery as full-bleed background (Clay template)

Site URL: https://www.wakeupinthegarden.com/

I have a slideshow gallery in the homepage, but want it as a full-bleed image background instead of a section under header. Is it possible to use code?

Thanks for any help.

8 minutes ago, 18250907 said:

Site URL: https://www.wakeupinthegarden.com/

I have a slideshow gallery in the homepage, but want it as a full-bleed image background instead of a section under header. Is it possible to use code?

Thanks for any help.

Could you try this custom css in Design->Custom CSS
 

#home.Index-gallery {
  position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}
#home.Index-gallery .Index-gallery-item-image img {
  width: 100vw !important;
    height: auto !important;
  margin: 0 auto;
}

I did but I don't see any change..

**EDIT**
The gallery is now full width, thank you. but is it possible for it to be behind the header as a background?

I'm looking for a slideshow to go behind the logo and navigation like this:

22 hours ago, 18250907 said:

I'm looking for a slideshow to go behind the logo and navigation like this:

Add to Design > Custom CSS

body.homepage header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

On 1/18/2021 at 4:21 PM, tuanphan said:

Add to Design > Custom CSS

body.homepage header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

 

Thank you so much! This worked like magic.

@tuanphan& @bangank36, I just started building out a site and was curious on the same question... I pasted the above code in and it did not work, I will post my url below, any guidance would be greatly appreciated 

https://cranberry-trumpet-9wxf.squarespace.com/

PW: 1313

Also, is there anyway to make the slides progress automatically?

Thanks!

5 hours ago, Patterson said:

@tuanphan& @bangank36, I just started building out a site and was curious on the same question... I pasted the above code in and it did not work, I will post my url below, any guidance would be greatly appreciated 

 

https://cranberry-trumpet-9wxf.squarespace.com/

PW: 1313

 

Also, is there anyway to make the slides progress automatically?

 

Thanks!

You mean slideshow under header on homepage?

2 hours ago, tuanphan said:

You mean slideshow under header on homepage?

Yes, I was hopping to have it appear under the nav, logo, and button... while also rotating through the slides on its own accord. Thanks

19 hours ago, Patterson said:

Yes, I was hopping to have it appear under the nav, logo, and button... while also rotating through the slides on its own accord. Thanks

Add to Design > Custom CSS > Then save & reload the site

/* Home header transparent */
body.homepage article section:first-child {
    padding-top: 0 !important;
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

/* Home header transparent */
body.homepage article section:first-child {
    padding-top: 0 !important;
}

 

Thank you! However, as you can see since I saved it it places the text too high. I even have the vertical positioning of the column at the lowest. Do you have any idea what could fix this?

@tuanphan, I made my own topic on the forum.

Please reply here moving forward, thank you!