CSS background-image Not Fixed

Question

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

Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem — JBis, Nov 22 '18 at 02:01
Its not css. If you disable js on your browser it works fine. It almost seems like some script is emulating a parallax effect. Probably some library or something, did you implement something that controls parallax? — JBis, Nov 22 '18 at 02:08
Check here @RichardTrinh http://www.emergencydatascience.org/assets/js/main.js Comment out the $bg code a see if it works specifically this line $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')'); — Dylan Anlezark, Nov 22 '18 at 02:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says. — JBis, Nov 22 '18 at 02:11
doesn't work. I also tried to disable parallax in chrome and it still scrolls with the page if (skel.vars.browser == 'chrome') off(). It's definitely parallax. I guess I can disable it but how? — Richard Trinh, Nov 22 '18 at 02:26
Any chance you could create a fiddle for us to work on? The site keeps being updated making it hard to diagnose. — Dylan Anlezark, Nov 22 '18 at 02:28
I don't know if fiddle allows Jekyll code that's what the website was built with... — Richard Trinh, Nov 22 '18 at 02:47

score 0 · Answer 1 · answered Nov 22 '18 at 03:57

0

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

answered Nov 22 '18 at 03:57

Millhorn

2,953
7
39
77

There are some parallax settings in your main.js file, but I don't see those being an issue. – Millhorn Nov 22 '18 at 04:04
thanks but how do I get rid of the empty space at the bottom of the image? I've tried height: 100vh and width: 100vw or height: 100% and width: 100%. The picture is better at 100vh and 100vw. The picture just zooms if at 100%. – Richard Trinh Nov 22 '18 at 04:11
Can you post a screenshot with what you're seeing? I don't see a blank space. This is what I see... [https://imgur.com/a/CPSEKwS](https://imgur.com/a/CPSEKwS) – Millhorn Nov 22 '18 at 04:23
hello, adding the bg div before the wrapper only works when I run it locally. The problem is still there when I access www.emergencydatascience.org. Also, this is the bottom I"m talking about: https://ibb.co/cmjkfV – Richard Trinh Nov 22 '18 at 17:42
weird how my cloudfront is fine but my route53 is not fine. They're both the same code: http://d3s44ff9bo8gsz.cloudfront.net/ http://www.emergencydatascience.org/ Also it everything seems to work fine when I view it on my macbook but for any other computer it seems to be broken – Richard Trinh Nov 22 '18 at 18:04
Some of your CSS may need browser-specific prefixes. – Millhorn Nov 22 '18 at 18:22
any idea how to implement that? – Richard Trinh Nov 22 '18 at 18:34
ah, it seems like both sites are fine now. I just wanna know how to get rid of the bottom blank space and have the image fit up to there. thanks. – Richard Trinh Nov 22 '18 at 19:05

CSS background-image Not Fixed

1 Answers1