Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
thewildinitiative

Targeting Index Page Parallax Background Images w/ CSS

Question

Posted (edited)

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

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...