Jump to content

Targeting Index Page Parallax Background Images w/ CSS

Recommended Posts

Posted

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!

  • Replies 6
  • Views 1.9k
  • Created
  • Last Reply
  • 2 weeks later...
Posted

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


  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.