Parallax Scrolling with CSS: background-image not displaying

Question

so I'm trying to achieve parallax scrolling with just css3. I've stuck to the w3schools tutorial but my image isn't displaying on my web page. here is my HTML:

    <!--Main Content-->
<main>
    <div class="parallaxBG">

    </div>
</main>

and here is my CSS:

.parallaxBG {
    background-image: url("Resources/Images/2018-01-03_17.07.41.png");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

can anyone answer?

Is your body and html set to height: 100%; also? If not, your div won't have any height without anything inside it. — Chris Riebschlager
– Chris Riebschlager, Commented Jan 5, 2018 at 0:21

Steve K · Accepted Answer · 2018-01-05 00:23:30Z

4

Set all of your parent elements to have a height of 100% as well otherwise your parallax div will have no height fill 100% of and will just have a height of 0 and nothing will show until you put some content in that div.

So like:

body, html, main{height:100%;}

answered Jan 5, 2018 at 0:23

Steve K

9,1353 gold badges26 silver badges43 bronze badges

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

1 Comment

MineGlade Over a year ago

It appears I've forgotten to set the height of my <main> tag to 100%. Thank you for the quick response!

Collectives™ on Stack Overflow

Parallax Scrolling with CSS: background-image not displaying

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related