thewildinitiative Posted August 28, 2019 Posted August 28, 2019 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!
tuanphan Posted August 31, 2019 Posted August 31, 2019 @livingcountryinthecity You should share site url to community check. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
LeeWe_Design Posted September 11, 2019 Posted September 11, 2019 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; }
SouthernSunEvents Posted February 24, 2021 Posted February 24, 2021 Also needing serious help on this. @thewildinitiative were you able to figure this out?
tuanphan Posted March 1, 2021 Posted March 1, 2021 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
SouthernSunEvents Posted March 1, 2021 Posted March 1, 2021 5 hours ago, tuanphan said: Can you share link to your site? We can check easier @tuanphan Site: www.southernsunevents.com Password: sse2020
tuanphan Posted March 6, 2021 Posted March 6, 2021 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.