nsdoyle Posted July 9, 2020 Share Posted July 9, 2020 Site URL: https://www.purehomeoffice.com/aspire-1 Heya I'd like to create a section with a fixed height of the window / media screen that scrolls through all the available text / content before proceeding to the next section. I found this bit of code that I believe will do what I want, but I don't know exactly how to implement it. https://codepen.io/aakhya/pen/QJWovp I attached a video to show what I'd like to achieve. Using 7.1, btw. fixed background scrolling example.mov Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 (edited) Are you trying to do it to all of the sections? Try adding this to design -> custom CSS .section-background { position: fixed !important; left:unset !important; } Edited July 10, 2020 by rwp Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 Can't believe it was that easy. That did the job marvelously. Thank you! rwp 1 Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 Guess I spoke too soon. I tried to add another section further down the page and the image from that section takes over all the way back to the top. Link to comment
rwp Posted July 10, 2020 Share Posted July 10, 2020 Remove the code from above and give this a try: .section-background img { position: fixed !important; } Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 That sort of fixed it. It's not taking up the rest of the page now, but now the second section's background image doesn't display. Link to comment
rwp Posted July 10, 2020 Share Posted July 10, 2020 (edited) You could set the background of the div manually to the URL of the image, and then hide the image tag. That's what they did in the link you posted. You would need to manually do it for each section. [data-section-id="5f0756efed03a802582b95aa"] .section-background img { display:none; } [data-section-id="5f0756efed03a802582b95aa"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } Edited July 10, 2020 by rwp Link to comment
Nolanpdm Posted December 13, 2022 Share Posted December 13, 2022 Not sure if you ever got this figured out. I just changed the "left" in the code to "center" and it works out. .section-background { position: fixed !important; center:unset !important; } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment