The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> parallax effect
Vigilant
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 8 2019, 11:46 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,152
Joined: 10-August 06
Member No.: 7



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?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Vigilant
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 9 2019, 12:50 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,152
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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Vigilant
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Vigilant
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th June 2019 - 09:57 AM