Background image turn opaque on scroll

Support
#1

Hello,

I want to make a background image turn opaque as the user scrolls. If anyone can help me, I would be so thankful. I couldn’t find any other questions that fully covered this topic.

Note that the background is set through the page settings instead of the customizer because I only want it on the one page. Also, please note that I am using XTheme and not Pro for this site.

Thanks so much,
Rosalynn

#2

Hey Rosalynn,

I could not inspect your site because its in under construction mode. Please give us access.

Thanks.

#3

Hello Christian,

Sorry about that. I turned it off so you should be able to view it now.

Thanks

#4

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#5

I know enough jquery that I think I can figure it out myself. The main difficulty I’m having is how to give a class or id to the background I’ve assigned in the page settings, or how to grab that image. Can you help me with that instead?

#6

Hi again,

You can give this a try, first add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.backstretch-opacity:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.6);
}

Then add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.backstretch').addClass("backstretch-opacity");
		} else {
			$('.backstretch').removeClass("backstretch-opacity");
		}
	});
});

As you see this requires custom coding and the script I’ve provided serves as a guide only, this will help you in getting started and we won’t be able to provide support to any issue caused by the above script.

Hope this helps!

#7

Wow! That is great, thank you so much. I think I can work it out from here.

Really appreciate it!

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.