Jump to content

Targeting Index Page Parallax Background Images w/ CSS

Recommended Posts

Hey all! On my site, I have several index pages. Several of the sections of these index pages have background/banner images for the nifty parallax effect.

I'm not fully satisfied with how those background/banner images are displaying at all times and I'm attempting to target them with CSS to make some adjustments. However, no matter how much digging I do, when I inspect the page code, I can't seem to find where those index page section background images live to figure out the correct CSS class to use to target them.

I'm using the Mojave template and the images were uploaded in the page (the section pages making up the index page) settings under media.

Can someone point me to where I can find the parallax index page background images when I'm inspecting? Or, at minimum, let me know the CSS targets I need to hit?

Thank you!

Edited by livingcountryinthecity
Initial Revision
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

I'm using the Brine template (which Mojave is a family member).

The tags for the Index Page sections' background images which are affected by Parallax Scrolling are


<div class="Parallax-host-outer">
  <div class="Parallax-host">
      <div class="Parallax-item" style="top: 0px; left: 0px; ..."></div>
      <div class="Parallax-item" style="top: 895px; left: 0px; ..."></div>
      <div class="Parallax-item" style="top: 2773px; left: 0px; ..."></div>      
  </div>
</div>

If you "View Source" of your webpage and search for them, they are located at the same level as

<div class="Site loaded">

which contains the

<header>

and

<section>

tags.

To target, for example, the first image to push it down 100px from the top of the screen, the following code can be used in the site's Custom CSS


.Parallax-host-outer .Parallax-host .Parallax-item:first-child {
   top: 100px !important;
 }


Edited by LeeWe_Design
Initial Revision
Link to comment
  • 1 year later...
On 2/25/2021 at 2:19 AM, SouthernSunEvents said:

Also needing serious help on this. @thewildinitiative were you able to figure this out?

Can you share link to your site? We can check easier

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
On 3/2/2021 at 1:46 AM, SouthernSunEvents said:

@tuanphan

Site: www.southernsunevents.com

Password: sse2020

Hi. You want to resize background image on mobile? I see 3 images here. Which image?

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

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.