Background images still exhibit scroll behaviour


#1



https://www.codecademy.com/courses/learn-sass/projects/parallax-banner


Even though my the background property in my mixin includes 'fixed', when the website renders, the background images still exhibit scrolling behaviour. i.e. when the mouse cursor is on the background and you scroll, it scrolls just the background image until it hits the bottom and then there is a separate scrollbar for the whole page. This ruins the parallax effect. Any ideas?


//Variables
$parallax-height: 100vh;
$center-margin: 0px auto;

//Mixins
@mixin parallax-background($file) {
  background: url($file) no-repeat center center fixed;
  @include background-size(cover);
}

@mixin background-size($size: cover) {
    background-size: $size;
    -webkit-background-size: $size;
    -moz-background-size: $size;
    -o-background-size: $size;
}

//Style

html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #2e3738;
}


#landscape {
  @include parallax-background('https://s3.amazonaws.com/codecademy-content/projects/sass/landscape.jpg');
}

#monkeys {
  @include parallax-background("https://s3.amazonaws.com/codecademy-content/projects/sass/monkeys.jpg");
}

#landscape,
#monkeys {
	width: 100%;
  height: $parallax-height;
  perspective: 1px;
  transform: translateZ(-2px);
  overflow-x: hidden;
  overflow-y: auto;
  h1{
		text-transform: uppercase;
    font-family: 'Bitter', serif;
    letter-spacing: 0.06em;
    font-size: 120px;
    color: #FFF;
    opacity: 0.7;
    text-align: center;
    transform: translateZ(-1px);
    border: 1px solid black;
  }
}

p {
	width: 70%;
	padding: 5%;
	margin: $center-margin;
	text-align: center;
	font-size: 20px;
	font-weight: 200;
	line-height: 1.4;
}


#2

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