The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic


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: 28th March 2024 - 04:16 PM