Printable Version of Topic

Posted by: Vigilant Apr 8 2019, 09:00 AM

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

Posted by: Christian J Apr 8 2019, 11:46 AM

As a sidenote, absolute units like cm are unreliable on screen media, they are more suitable for print. Try using percent, px or similar.


Seems to work for me too.


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?

Posted by: Vigilant Apr 9 2019, 07:25 AM

[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

Posted by: Christian J Apr 9 2019, 12:50 PM

"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.

Posted by: Vigilant Apr 10 2019, 03:34 AM

Thanks a lot Christian.
I will try to fix it.

Posted by: Vigilant Apr 10 2019, 03:38 AM

Ooooooh, yesssss, it works!
Christian, you are a hero!