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.

CSS

Marcus Tisäter
Marcus Tisäter
4,886 Points

Creating a nice background color

Hello,

If anyone of you guys seen the Creating Loops with @for and @each in the SASS Basic tutorial this guy Hampton Catlin creates a html page with 100 divs all named box. In his css he style the box and then use the SASS @for loop to create this nice background shade of all these boxes. Now is this possible to do somehow with just a background color in the body tag? Any suggestions of how to do that?

Bassicly I want to the same thing he did but only with the body tag since I'm using a CMS it's pretty hard to just create a number of divs that will probly mess up my content..

Thanks

Hi Marcus,

I see what you wann do. Question first: you don't want to use a simple gradient SASS/CSS property to add a gradient effet to your background? To me it would have the same effect.

But if you don't, I think you may try to create divs with z-index so simulate a background. (you could make a non-smooth gradient effect).

I agree a background gradient would suffice. I think the video he his referring to just used this as an example to show how a loop works.

Marcus Tisäter
Marcus Tisäter
4,886 Points

Yes thanks. I will look into that.

1 Answer

I'm not sure if you got your answer with this, but here is a great web app that can help with creating gradients in pure CSS. http://www.colorzilla.com/gradient-editor/