Jump to content

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

Recommended Posts

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 CSSimage.thumb.png.e7d5def24302ad31748c37b7737f860b.png
 

#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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
22 hours ago, 18250907 said:

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

Front Page sample.jpg

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

@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!

Edited by Patterson
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

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.