How to create a parallax effect in html for a fixed div

Question

I have created a html page with a fixed sidebar which also have a background image. I'm trying to bring a parallax effect into the background image but I simply can't. I tried changing the background-attachment into fixed and scroll, but as the div is fixed parallax effect just won't work for me. Please find me a solution. Here's my css code.

.header{
    background-image: url("../images/8.jpg");
    background-attachment:scroll;
    height: 100%;
    position: fixed;
    background-size: cover;
    width: 40%;
    background-repeat: no-repeat;
    margin: 0;
    padding-left: 20px;
    font-family: 'Asap Condensed';
    font-size: 50px;
    padding-top: 100px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }

You should probably use Javascript for an actual parallax effect (I assume you're looking to get different scrolling speeds). If you really don't want to use any you can take a look at this tutorial for a pure css Parallax effect: keithclark.co.uk/articles/pure-css-parallax-websites Keep in mind that this tutorial is kind of experimental, though. — Maharkus
– Maharkus, Commented Sep 18, 2017 at 15:24

J. Tate · Accepted Answer · 2017-09-18 15:22:05Z

0

Here is a good example from W3Schools using the background-attachment: fixed; technique:

<style>
.parallax { 
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

<!-- Container element -->
<div class="parallax"></div>

answered Sep 18, 2017 at 15:22

J. Tate

1631 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ali Over a year ago

I tried this, but as I said the div is fixed and giving the property of background-attachment:fixed does not make a parallax effect in the code that I have uploaded in the question.

J. Tate Over a year ago

No, it won't in the code you have uploaded, but you should be able to place it inside another div and only give the parallax effect to one div.

Collectives™ on Stack Overflow

How to create a parallax effect in html for a fixed div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related