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

HTML

Nick Zachary
Nick Zachary
6,816 Points
Posted by Nick Zachary
Nick Zachary
6,816 Points

How do I achieve a gradient texture background fade? LINK here as example.

Hi, I really like this girl's website background how the texture fades away into a solid color as you go down. How do I achieve this?

4 Answers

derp
derp
3,571 Points
derp
derp
3,571 Points

Could you post the girl's website, you probably mean the 'Parallax Effect'

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

She made an image in an image editing program and uses CSS to repeat it.

body {
  background: #818176 url(graphics/body.jpg) repeat-x;
}

The color is set to the gray color, and the image repeats over it.

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

Nick - Hi again,

I just saw, after noticing that you posted the same question in a couple different ways, that you might benefit from a neat little tool called a code-inspector.

If you're using Chrome or Firefox, they both come with a code inspector (or you can download and install an add-on, such as Firebug Light or something similar).

If you find a site you like, right-click on the part of the site you like. In the menu that pops up, you'll get an option "Inspect Element" at the bottom of the menu.

select "Inspect Element" and a window will pop-up that will show you the HTML and CSS that is used to make the page.

I found the above answer by going to her site, inspecting, and starting with the <body> tag, looking at the CSS. It appears that the body has the above CSS for the background.

I've learned a lot about cool CSS and Layout tricks by using that tool... it's invaluable!

(ps. it also helps if you're trying to hack/customize a wordpress theme or 3rd party code)