joshroos Posted February 23 Share Posted February 23 Hi, I am trying to achieve parallax scrolling on top of full-bleed fixed BG image on this single page: https://www.roosbrothers.com/about-2 Currently my BG image moves with the text on the page, when I want only the text to move and slide over the image. Also, I am having to use an opacity code to make the BG image viewable, therefore my page text is being effected when I want it at full opacity. Here is the code snippet I have embedded in the page currently: Quote <style> body#collection-65d8d98b7bda0c0bd3e377b0 { background-image: url(https://images.squarespace-cdn.com/content/5fad6eae4d2b9f6b5cce9e14/88aa5be8-a1d1-4118-ab66-3305c1a400bc/RoosBrothers_portrait.jpg?content-type=image%2Fjpeg); background-size: auto 100%; background-repeat: no-repeat; background-position: center; background-position: fixed; height: 100%; opacity: .6; left: 0; top: 0; width: 100%; } </style> Any help would be much appreciated! Link to comment
tuanphan Posted February 26 Share Posted February 26 It should be background-attachment: fixed; this will fixed image and you can achieve parallax effect, but note: this code won't work on iOS joshroos 1 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
joshroos Posted February 27 Author Share Posted February 27 (edited) 18 hours ago, tuanphan said: It should be background-attachment: fixed; this will fixed image and you can achieve parallax effect, but note: this code won't work on iOS This worked, however as you mentioned on IOS it creates a ton of vertical space above and below the BG image. Is there additional code to make it so when the browser is resized the BG image will crop in width-wise so the image remains full-bleed? Edited February 27 by joshroos Link to comment
tuanphan Posted February 29 Share Posted February 29 The page url doesn't exist. Can you check it again? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment