Help - Search - Members - Calendar
Full Version: parallax effect
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Vigilant
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
QUOTE(Vigilant @ Apr 8 2019, 04:00 PM) *

.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
[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
"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. unsure.gif
Vigilant
Thanks a lot Christian.
I will try to fix it.
Vigilant
Ooooooh, yesssss, it works!
Christian, you are a hero!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.