parallax effect |
parallax effect |
Vigilant |
Apr 8 2019, 09:00 AM
Post
#1
|
Group: Members Posts: 4 Joined: 8-April 19 Member No.: 26,871 |
Hi,
I am a beginner in the world of html and css. I designed a simple website with a parallax effect in it. The idea is, that a visitor while scrolling sees a picture like it is behind the actual website. In html I used the following code: <div class="container-fluid parallax-background parallax"> </div> In css I used the following code: .container-fluid { background-color: transparent; width: 100%; height: 8cm; } .parallax { background-image: url("voorjaar.jpg"); } .parallax-background { min-height: 300px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; width: 100%; float: right; background-size: cover; margin-bottom: 25px; } Now my problem: When opening my html-document, the parallax effect is visible and it works. After downloading all website documents to the server, the parallax effect is NOT visible and NOT working at all. What did I do wrong? Best regards - Ulrike |
Christian J |
Apr 8 2019, 11:46 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
.container-fluid { background-color: transparent; width: 100%; height: 8cm; } As a sidenote, absolute units like cm are unreliable on screen media, they are more suitable for print. Try using percent, px or similar. QUOTE When opening my html-document, the parallax effect is visible and it works. Seems to work for me too. QUOTE After downloading all website documents to the server, the parallax effect is NOT visible and NOT working at all. Do you see the background image at all? Is the page tall enough to be scrollable? Can you link to a sample page showing the problem? |
Vigilant |
Apr 9 2019, 07:25 AM
Post
#3
|
Group: Members Posts: 4 Joined: 8-April 19 Member No.: 26,871 |
[quote]After downloading all website documents to the server, the parallax effect is NOT visible and NOT working at all.[/quote]
Do you see the background image at all? Is the page tall enough to be scrollable? Can you link to a sample page showing the problem? [/quote] The page is definitely tall enough to be scrollable. You can find my simple "under construction"-page here: https://www.vigilant-solutions.nl The parallax effect should appear under the photo of myself. Thanks a lot for your kind help! Best regards, Ulrike |
Christian J |
Apr 9 2019, 12:50 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
"voorjaar.jpg" is missing, but "voorjaar.JPG" exists (case matters on web servers, as opposed to when using local Windows files).
There is also some jQuery script about parallaxes that I didn't understand from a quick glance. |
Vigilant |
Apr 10 2019, 03:34 AM
Post
#5
|
Group: Members Posts: 4 Joined: 8-April 19 Member No.: 26,871 |
Thanks a lot Christian.
I will try to fix it. |
Vigilant |
Apr 10 2019, 03:38 AM
Post
#6
|
Group: Members Posts: 4 Joined: 8-April 19 Member No.: 26,871 |
Ooooooh, yesssss, it works!
Christian, you are a hero! |
Lo-Fi Version | Time is now: 27th September 2024 - 04:17 AM |