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,661 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? |
Lo-Fi Version | Time is now: 27th April 2024 - 09:13 AM |