jcsport123 Posted August 31, 2020 Share Posted August 31, 2020 Site URL: https://www.elevateptr.com/ Hi - does anyone know how I can adjust the custom code injected into my footer so the parallax code targets the first image on my homepage? Would it be block specific? If not, can anyone help me with the code to make a background image look good on mobile? I left this main image as an image vs. a background as I added css so on a mobile view the image shrinks to fill the screen. Thank you! Link to comment
tuanphan Posted August 31, 2020 Share Posted August 31, 2020 I see the image fine here on mobile. Did you solved the problem? 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!) Link to comment
jcsport123 Posted August 31, 2020 Author Share Posted August 31, 2020 @tuaphan that image can not be a background image for it to look good on mobile. I want to add the Parallax scroll feature to that specific image. The code is in the footer and is listed below. So in addition to finding the .section-background img I need to add a line of code specific to that block and I can't figure out how to write that code. Thanks for your help! <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.