CODEWITHSUNDEEP
cssbackground-imagebackground-attachment
Richard Trinh
Richard Trinh

Reputation: 439

CSS background-image Not Fixed

I'm trying to do a simple background-image that will stay in place when I scroll down the page. The background image won't stay in place. I've set the background-attachment to fixed.

See: www.emergencydatascience.org

My CSS code:

background-image: url($background_image); 
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -1;

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

More CSS if it helps: https://github.com/dighr/data-flood/blob/gh-pages/_sass/layout/_wrapper.scss

Upvotes: 3

Views: 884

Answers (1)

Millhorn
Millhorn

Reputation: 3176

Move your .bg class to be immediately after the start of your body. You have an odd set up with your #wrapper and your .bg

<body class="is-loading">
   <div class="bg"></div>
    <!-- Wrapper -->
        <div id="wrapper" class="fade-in">

            <!-- Intro -->
                <div id="intro">
                    <h1 class="main-heading">Emergency Data Science</h1>
                    <h2 class="main-heading">Taking Advantage of the Data Flood</h2>
                    <p class="main-heading"><b>December 4 - 5, 2018 8:30AM - 5:00PM | Toronto</b></p>
                </div>

I made a screenvideo of the result here.

https://www.useloom.com/share/f0c19c45ff9b421e903632157b0add64

Upvotes: 0

Related Questions