For those not able to get the landscape and monkey images to show


#1

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

I have submitted an error report to Codecademy. On Step 4, the instructions tell you to add the following mixin, which includes a parameter (cover):

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

The error is that the background-size mixin you add in Step 3 does NOT take an argument:

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

so when they instruct you to add the parameter (cover), the SCSS will fail to compile to CSS and thus the photos you add in Step 5 will NOT show. You must delete the (cover) from the mixin in Step 4 before the SCSS will compile.


#2
$parallax-height: 100vh;
$center-margin: 0px auto;

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

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

#3

Not sure if you meant to add a comment. Although the code you posted (the code given in the instructions) WILL compile with other SCSS compilers once you add a selector rule-set that includes the parallax-background mixin (which in turn includes the background-size mixin), it will NOT compile on Codecademy’s code editors. At least it wouldn’t for me, not until I removed the unnecessary (cover) in @include background-size(cover); under the parallax-background($file) mixin.

Here’s my complete SCSS code for the project, which works:

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

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

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

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

#landscape {
  height: $parallax-height;
  width: 100%;
  perspective: 1px;
  transform: translateZ(-1px);
  overflow-x: hidden;
  overflow-y: auto;
  @include parallax-background("https://s3.amazonaws.com/codecademy-content/projects/sass/landscape.jpg");
}

#monkeys {
  height: $parallax-height;
  width: 100%;
  perspective: 1px;
  transform: translateZ(-1px);
  overflow-x: hidden;
  overflow-y: auto;
  @include parallax-background("https://s3.amazonaws.com/codecademy-content/projects/sass/monkeys.jpg");

}

#landscape,
#monkeys {
	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(-2px);
	}
}

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

#4

Actually, yes, I meant to add that my SCSS compiled as expected.


#5

Well that’s very odd. I just deleted my SCSS in the project, pasted it back with it like you have it (including the paramter (cover)), and when I click “Save,” it does not compile. But as soon as I delete (cover) and hit “Save,” it compiles. See screenshots


#6

This may be a platform issue. Which browser are you using?

Please use the bug reporting tool to let the dev team know of the issue. Let them know the OS and browsers you have tried. Thanks.


#7

I did. Thanks for your comments as always :slightly_smiling_face:

P.S. Used both Chrome on Windows 10 and FireFox on MacOS Sierra


#8

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