Parallax doesn't work on Chrome

HTML & CSS
1

I’ve made a website and tested it on all browsers and just in Chrome the parallax effect doesn’t work, sometimes I have to refresh or the image won’t display. I would really appreciate any help on how to troubleshoot this one.

Here is my code

HTML

<div class="inspire parallax-section">
<div class="parallax-content">
    <div class="container">
            <h2>A brand is no longer what we tell the consumer it is – it is what consumers tell each other it is.</h2>

    </div>
</div>
<!-- end parallax-content -->

CSS

.inspire{
    background-image: url(http://i.imgur.com/EXfjCjv.jpg);
}

.container{
    width: 100%;
    text-align: center;
}

.parallax-section{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    color: #fff;
}

.parallax-content{
    padding: 120px 0 105px 0;
    background: #000;
    background: rgba(0, 0, 0, .6);
}

.parallax-content h2{
    font-size: 36px;
    font-size: 3.6rem;
    margin: 65px 0 80px 0;
}

Here my live code: https://jsfiddle.net/fLgtqve8/embedded/result/

3

Are you missing some Javascript in that fiddle?

4

Hi @RyanReese

I’m only use pure css.

5

Have you ever seen any “parallax” sites that aren’t a big FAIL without JavaScript?
AFAIK parallax is not a CSS-only thing

6

By parallax effect, I’m guessing you mean the fixed background. Not strictly a parallax effect. Usually all layers will scroll, but at different rates. Except if the background was considered infinitely far away, then it may appear fixed.
The strange thing I’m seeing in Firefox is that in the JSfiddle you linked to the background does not appear fixed, it scrolls with the text, but if I go in the editor, it does appear fixed.

7

Assuming the code is just as the folowingf then it appears to be working ok in chrome and Firefox.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.inspire {
	background-image: url(http://i.imgur.com/EXfjCjv.jpg);
}
.container {
	width: 100%;
	text-align: center;
}
.parallax-section {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	color: #fff;
}
.parallax-content {
	padding: 120px 0 105px 0;
	background: #000;
	background: rgba(0, 0, 0, .6);
}
.parallax-content h2 {
	font-size: 36px;
	font-size: 3.6rem;
	margin: 65px 0 80px 0;
}
</style>
</head>

<body>
<div class="inspire parallax-section">
		<div class="parallax-content">
				<div class="container">
						<h2>A brand is no longer what we tell the consumer it is – it is what consumers tell each other it is.</h2>
				</div>
		</div>
</div>
<!-- end inspire -->
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>

All you have is a fixed background image and the front panel will just scroll away over the top. If you are seeing something different we will need a live example as the fiddle seems to cause problems.

8

It’s technically doable, but his CSS is NOT setup to do anything like that.

That’s what I’m seeing, which is definitely not a parallax, and definitely not coded to be one right now.

9

There are 2 examples below:

http://responsiveexpert.com/themes/lumen/html/onepage.html
http://themearth.com/demo/cvhunt/html

My code look like them.

10

The examples above use JavaScript. They are not “pure CSS”. Look at the JavaScript at the bottom of both pages.

11

Also, I would not describe those as Parallax.

12

Without js a pseudo parrallax effect is created by letting content slide over a fixed background image.

If you look at this code you will see that the content moves but the background stays still.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.inspire {
	background-image: url(http://i.imgur.com/EXfjCjv.jpg);
}
.container {
	width: 100%;
	text-align: center;
}
.parallax-section {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	color: #fff;
}
.parallax-content {
	padding: 120px 0 105px 0;
	background: #000;
	background: rgba(0, 0, 0, .6);
}
.parallax-content h2 {
	font-size: 36px;
	font-size: 3.6rem;
	margin: 65px 0 80px 0;
}
</style>
</head>

<body>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<div class="inspire parallax-section">
		<div class="parallax-content">
				<div class="container">
						<h2>A brand is no longer what we tell the consumer it is – it is what consumers tell each other it is.</h2>
				</div>
		</div>
</div>
<!-- end inspire -->
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>

Without js that’s the sort of effect you will get.

Most parrallax effects also move the background at a different rate to the foreground which requires some js.

13

Thanks everyone. Now I can fixed my issue by using Skroll plugin.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.