Sakis Posted March 28, 2020 Share Posted March 28, 2020 Hi. I'm looking to find a way to keep my background image stable when user is scrolling. How can i lock the background image in place? Link to comment
derricksrandomviews Posted March 28, 2020 Share Posted March 28, 2020 What template are you using? if it is in the brine family do this: In the Home Menu, click Design, then Site Styles. Scroll down to the Main: Overlay section. Check DIsable Parallax. You may also want to check Parallax Smart Crop to minimize cropping. Click Save. Link to comment
Sakis Posted March 28, 2020 Author Share Posted March 28, 2020 1 minute ago, derricksrandomviews said: What template are you using? Version 7.0– Brine family (Pedro template) Link to comment
derricksrandomviews Posted March 28, 2020 Share Posted March 28, 2020 I figured, so you can change that as I posted. Don't change the parallax smart crop however, unless you just want to see what it does. Link to comment
Sakis Posted March 28, 2020 Author Share Posted March 28, 2020 7 minutes ago, derricksrandomviews said: What template are you using? if it is in the brine family do this: In the Home Menu, click Design, then Site Styles. Scroll down to the Main: Overlay section. Check DIsable Parallax. You may also want to check Parallax Smart Crop to minimize cropping. Click Save. Thanks for your suggestion. Disabling the parallax in site styles it also locks the image in front of background image. I want to keep the parallax effect with the image but background image has to be stable to look nice. Now when scrolling both background image and image in front are moving upon scrolling. Link to comment
Sakis Posted March 28, 2020 Author Share Posted March 28, 2020 Just made it with custom CSS. Thank you for your answers! Link to comment
derricksrandomviews Posted March 29, 2020 Share Posted March 29, 2020 Could you post the code? Other folks might need to do the same thing. Link to comment
Sakis Posted March 29, 2020 Author Share Posted March 29, 2020 2 hours ago, derricksrandomviews said: Could you post the code? Other folks might need to do the same thing. Yes of course! .collection-type-index #HERE_GOES_THE_URL_SLAG_NAME_OF_THE_PAGE_WE_NEED_TO_APPLY_THE_BACKGROUND_IMAGE { background-image: url("HERE GOES THE URL OF OUR BACKGROUND IMAGE WE UPLOADED THROUGH MANAGE_CUSTOM_FILES BUTTON INSIDE CUSTOM CSS SECTION"); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } The perfect background image size to fit exactly is 1500 pixels x 2500 pixels. Link to comment
Simon-JustGoodJuju Posted April 16, 2020 Share Posted April 16, 2020 Can you provide a link to the page so I can see your solution in action? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.