CSS background-image Not Fixed
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
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
css background-image background-attachment
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
|
show 3 more comments
3
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
css background-image background-attachment
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
1
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
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 2:08
Check here @RichardTrinh 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 2:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11
|
show 3 more comments
3
3
3
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
css background-image background-attachment
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
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
css background-image background-attachment
css background-image background-attachment
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
edited Nov 22 '18 at 1:52
Richard Trinh
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
asked Nov 22 '18 at 1:42
Richard TrinhRichard Trinh
8918
8918
1
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
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 2:08
Check here @RichardTrinh 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 2:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11
|
show 3 more comments
1
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
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 2:08
Check here @RichardTrinh 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 2:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11
1
1
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
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 2:08
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 2:08
Check here @RichardTrinh 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 2:08
Check here @RichardTrinh 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 2:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11
|
show 3 more comments
1 Answer
1
active
oldest
votes
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 3:57
webfrogswebfrogs
1,16832447
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4: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
– webfrogs
Nov 22 '18 at 4: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: 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: d3s44ff9bo8gsz.cloudfront.net 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
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422780%2fcss-background-image-not-fixed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 3:57
webfrogswebfrogs
1,16832447
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4: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
– webfrogs
Nov 22 '18 at 4: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: 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: d3s44ff9bo8gsz.cloudfront.net 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
|
show 3 more comments
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 3:57
webfrogswebfrogs
1,16832447
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4: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
– webfrogs
Nov 22 '18 at 4: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: 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: d3s44ff9bo8gsz.cloudfront.net 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
|
show 3 more comments
0
0
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 3:57
webfrogswebfrogs
1,16832447
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 3:57
webfrogswebfrogs
1,16832447
answered Nov 22 '18 at 3:57
webfrogswebfrogs
1,16832447
answered Nov 22 '18 at 3:57
webfrogswebfrogs
1,16832447
answered Nov 22 '18 at 3:57
webfrogswebfrogs
1,16832447
1,16832447
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4: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
– webfrogs
Nov 22 '18 at 4: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: 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: d3s44ff9bo8gsz.cloudfront.net 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
|
show 3 more comments
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4: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
– webfrogs
Nov 22 '18 at 4: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: 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: d3s44ff9bo8gsz.cloudfront.net 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
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4:04
There are some parallax settings in your main.js file, but I don't see those being an issue.
– webfrogs
Nov 22 '18 at 4: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 4:11
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 4: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
– webfrogs
Nov 22 '18 at 4:23
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
– webfrogs
Nov 22 '18 at 4: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: ibb.co/cmjkfV
– Richard Trinh
Nov 22 '18 at 17:42
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: 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: d3s44ff9bo8gsz.cloudfront.net 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
weird how my cloudfront is fine but my route53 is not fine. They're both the same code: d3s44ff9bo8gsz.cloudfront.net 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
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422780%2fcss-background-image-not-fixed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Not sure why but when I scroll something is changing the inline transform matrix. Thanks your problem
– JBis
Nov 22 '18 at 2:01
Can that be fixed from my current CSS code?
– Richard Trinh
Nov 22 '18 at 2:05
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 2:08
Check here @RichardTrinh 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 2:08
Open up dev tools and search "parallax" its in main.js as @DylanAnlezark says.
– JBis
Nov 22 '18 at 2:11