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

Targeting Index Page Parallax Background Images w/ CSS



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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 1

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>      

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





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 post
  • 0
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

Link to post
  • 0
On 3/2/2021 at 1:46 AM, SouthernSunEvents said:


Site: www.southernsunevents.com

Password: sse2020

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

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