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

Nicholas Lee
Nicholas Lee
12,474 Points
Posted by Nicholas Lee
Nicholas Lee
12,474 Points

What lesson will tech me to have a 'scrolling div' in with a 'fixed, repeat background'? Or is it done with javascript?

I was looking to create a similar affect like this website below.

http://www.jennifernyberg.com

I thought I could have a background image from a css page and set it to fixed and repeat.

Then, wrap the entire body in a div and add a box-shadow? I have been having trouble trying to accomplish this. Should I delve more into javascript to complete this?

I tried looking at the sites code but it's a wordpress and super over killed.

Thank you for any tips or links

2 Answers

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

the snippet of CSS you're looking for is;

background-attachment: fixed;

http://www.w3schools.com/cssref/pr_background-attachment.asp

This will set the background image to not scroll with the rest of the page. In your situatiion you would likely want to apply this to your body tag.

For the white background you will want to wrap all of your html in an wrapper div just inside the body.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Nicholas,

Like bleedcmyk said, you use background-attachment: fixed.

This is lesson where this is shown.