Broadway Step 3


#1

Are we not supposed to simply copy/paste the code found here? (and change the url of course) The code on this page seems to deal with getting an image to take up the entire page nicely, not to take up an entire div nicely. When I use the code on my project, the image doesn't react to scrolling as it should.

Making my CSS rule like this makes it act/look like the mock:

.jumbotron {
  height: 800px;
  background: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I don't really understand why, though.


#2

I suppose it would make some sense if these instructions:

Pay attention to the background and the background-size properties.

Meant that you'd need to write this CSS:

.jumbotron {
  height: 800px;
  background: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
  background-size: cover;
}

On a desktop the image almost mimics the mock's image. But when you start shrinking the width of the browser things get more out whack, and the image doesn't remain centered like in the mock.

The cheat sheet seems to allude to this being the right way to do this step, too. Doesn't seem quite right, though.


#3

Hi Adam,

Remove background-attachment: fixed; or the fixed from

background: /* ... */ fixed /* ... */;

No need for all those prefixes! That article's outdated now, you only need background-size: cover; for it to work :)

I think you need to add something like

background-position: center center; /* x, y axis */

and then it'll stay in the center of the page.


#4

Thanks for your response! Looking more into background-attachment and background-position helped.

I still think the instructions/guidance for this step are pretty bad, though. My guess is a lot of people are doing this one wrong. They're probably using the format found in the cheat sheet, which is close but not 100% right. How is a student supposed to know that adjusting background-position will do the trick? Linking to a page where multiple values are used with the background property just made things confusing, too.


#5

Well, although there isn't a description of what it does,

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
                                        /* ^ centering the background */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

- Perfect Full Page Background Image

I think that they're expecting you to copy the code, and modify the background image URL, but yeah - I think Codecademy could've done the exercise a little better.


By the way, are you an Advisor? I'm wondering because of your Super User badge :)


#6

Yep, but if a student copies that code the image won't be like the image in the mockup because of 'fixed'. She/he would have to look into what shorthand properties go into the background property, and find out that background-attachment defaults to scroll but is set to fixed in that code.

:no_mouth:!


#7

2 posts were split to a new topic: Broadway, can't figure out why the background image isn't full height