Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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

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

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)