Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sara Parker
Sara Parker
2,238 Points
Posted by Sara Parker
Sara Parker
2,238 Points

Hi. I need some tips.

I came over this page, and I liked it very much. Does somebody know an easy way to do something like this?

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Hi again "sis". :wink:

That's a cute effect, and it is really easy to do!

It's done using multiple images (in this case, 5 of them) that are displayed as backgrounds of separate elements instead of actual image elements. The elements are explicitly sized to fill the screen, and the backgrounds are sized to fill their elements and given a fixed position on the screen.

This technique is often used to create a "parallax" scrolling effect, but this time there's no visible content in the element to be seen moving over the fixed background. So instead it becomes a "scroll to reveal" effect.

Part of why it's so neat in your example is that the different images all have a good bit in common, so it appears that only some things are changing instead of the whole image.

code.html 
<body>
  <div class="image_1"></div>
  <div class="image_2"></div>
  <div class="image_3"></div>
  <div class="image_4"></div>
  <div class="image_5"></div>
</body>
styles.css 
div[class^="image"] {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.image_1 { background-image: url(image_1.jpg); }
.image_2 { background-image: url(image_2.jpg); }
.image_3 { background-image: url(image_3.jpg); }
.image_4 { background-image: url(image_4.jpg); }
.image_5 { background-image: url(image_5.jpg); }
Sara Parker
Sara Parker
2,238 Points
Sara Parker
Sara Parker
2,238 Points

Hi bro, haha. Thank you so much!

But can you help me to put this into my code? I am very new to this, so I do not know if I should delete what I've created before(or just keep some of it) or to create a brand new code.

I greatly appreciate the help!

https://w.trhou.se/9bz9ovkc6g

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

First, I had to move index.html out of the "html" directory so it would load the images and scripts properly.

Then I changed the "photos" section:

index.html 
    <section id="photos">
      <div class="image_1"></div>
      <div class="image_2"></div>
      <div class="image_3"></div>
      <div class="image_4"></div>
      <div class="image_5"></div>
    </section>

And then I added this to the CSS:

main.css 
#photos { 
  height: 298px;  /* fit to the images */
  width: 298px;
  overflow-y: scroll;
  margin: auto;
}
div[class^="image"] {
  height: 298px;
  background-position: 50% 286px;  /* manually adjusted to fit the page */
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.image_1 { background-image: url(../img/n.jpg); }
.image_2 { background-image: url(../img/e.jpg); }
.image_3 { background-image: url(../img/h.jpg); }
.image_4 { background-image: url(../img/hh.jpg); }
.image_5 { background-image: url(../img/blue.jpg); }

Because of how the fixed background works, getting this effect inside a container requires adjustment to fit the image sizes and page layout. And because we're dealing with backgrounds, putting the captions back will probably require either making them part of the images or a bit of JavaScript coding.

Sara Parker
Sara Parker
2,238 Points
Sara Parker
Sara Parker
2,238 Points

Thank you so much! It almost work now, but there's something wrong with the pictures that I can't get right. Do you know what the problem is, Steven?

https://w.trhou.se/st3hlerwng

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I notice a few issues:

  • you seem to be doing something more like the original example now, you may want to eliminate the container
  • the last photo's name has two periods in it, so it's not being found
  • to make the effect work right, the photos need to be re-cropped so the face is always in the same place
  • the photos should also all be the same size (in both dimensions)
Sara Parker
Sara Parker
2,238 Points
Sara Parker
Sara Parker
2,238 Points

Thank you so much!