CSS - Parallax Image not working

Question

I have this whole section here:

<section id="design-centre">
    <section id="design-centre-cover">
        <div class="container">
            <div class="row">
                <div class="cover-left">
                    <h1>Our Designs Make Luxury More Affordable</h1>
                </div>
            </div>
        </div>
    </section>
 </section>

And here is the CSS:

 section#design-centre {
    position: relative;
 }

 background: url(../images/design-center-cover.jpg) center top no-repeat;
    height: 800px;
    background-attachment: fixed;
 }

What I am trying to do is the following:

Have the image scroll when I the user scrolls, here is an example on what I am looking for:

http://www.hush.ca/hush-design-main/#hush-design

I tried using background-attachment: fixed; but that didn't work at all

You'll need JavaScript for this. – j08691 Aug 07 '15 at 15:37 — j08691, Aug 07 '15 at 15:37

score 0 · Answer 1 · edited May 23 '17 at 11:58

At the moment, it doesn't seem to be possible without JavaScript. Try some tutorials for example code. The main premise is using either the vanilla JavaScript window.onscroll or the jQuery $(window).scroll() event handlers to detect scrolling of the main page, and reposition the background accordingly.

Also, next time you might want to search SO first for duplicate/similar questions before asking your own question.

CSS - Parallax Image not working

1 Answers1