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

Posted by Gabriel E
Gabriel E
8,916 Points

How to get background image to stay on current screen only

I know, very confusing title. But here's the deal. I have a background image that fits perfect: responsive, no-repeat, everything. But I need to get it so that it just stays on the screen for the first scroll. The second, (or pixel), the user scrolls down, it goes past that picture onto a new one, or background color or whatever. Here's a good example. Just look at the first background image and scroll and see what I mean. Thanks a ton! https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage If you'll just watch the video until about 0:18, you can see an example. Thanks!!

2 Answers

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Hi Gabriel, here is the link to the CodePen so you can inspect the code he used: http://codepen.io/ThiagoFerreir4/pen/eNMxEp

What he's done is created divs for each section of the page, each with a defined pixel height of 855px and each has its own background image. To get the image to remain in position while the second image appears to scroll over the top of it, the trick in CSS is to use:

div { 
  /* url to your image here */
  background-size: cover;
  background-attachment: fixed;
}

Hope that helps!

Gabriel E
Gabriel E
8,916 Points

Hey Joel, Thanks, that made a ton of sense. I put everything I wanted in my first div in a div named main, and then sections within it. However, I'm not supposed to look at the example code while working on this, so could you tell me where I define the div height? here is my css code dealing entirely with the background image I have so far, my keyboard switch got messed up, so I can't add tick marks. Sorry for the awful formatting:

div { background: url(http://i1262.photobucket.com/albums/ii617/xGabey/background_zpsjvpwsren.png) no-repeat center center; background-size: cover; background-attachment: fixed; height: 855px; }

Gabriel E
Gabriel E
8,916 Points

Ok so basically, there's white space on the top and bottom, and the picture goes a bit past the page, but mainly I cant cover all the white space.

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

You don't need to use 855px yourself, you could use height: 100vh on the div to make it the full height of the screen, although bear in mind this might not be suitable for smaller devices.

The whitespace sounds like it's coming from either margins set on the div or the default body margin. I've placed your code onto a CodePen and added a couple of extra lines if you want to use it as a reference: http://codepen.io/joelbardsley/pen/EgbWWV

Gabriel E
Gabriel E
8,916 Points

Oh wow! Setting the margin and padding to 0 helped a ton, no more space on the side. But it's really weird. There's still space on the top. I even deleted chunks of other code, but it didn't change. Do you have any other thoughts on that?

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

I can only suggest trying to change the background-size from cover to auto 100%

Gabriel E
Gabriel E
8,916 Points

Thanks! All set now!

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi Gabriel,

Check out these plugins:

http://alvarotrigo.com/fullPage/

http://www.baianat.com/resources/more/