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 CSS Basics (2014) Enhancing the Design With CSS Gradients

Issues with CSS background gradients and background image.

Guil Hernandez , Hi! I'm following the CSS tutorial for gradients and background pictures while working on my portfolio. I already have my picture as a background, but I would like to add a gradient also, since my picture is not wide enough for the page, but it doesn't read it.

I'm using Chrome and it doesn't work at all. My code is exactly the same as you have it on the video, but somehow it only reads one or the other, not both at the same time. What am I doing wrong?

I can send you the CSS code and pic of how it shows if you want it.

Thanks so much.

Claudia

Hi Claudia,

Please post the css that you're trying.

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Claudia Lucar,

It looks like the top gradient layer [linear-gradient(#004092, #020202)] is covering up the bottom two layers since it's completely opaque. If you want the bottom layers to show through, the topmost layer needs to have transparency.

That worked out great! Thanks Guil :)

Good morning Jason,

Thanks for the response. Here is the code:

The HTML:

<header id="top" class="index-header">
   <img src="images/index-header-logo.gif">
   <h1>ClauDesigns</h1>
   <h2>Designing the World of the Web</h2>
</header>

The CSS:

body {
  margin: 0;
  color: #878787;
}

.index-header {
  padding-top: 100px;
  height: 500px;
  text-align: center;
  background: linear-gradient(#004092, #020202),
  linear-gradient(0deg, #fff, transparent),
  #020202 url(../images/mainpic.gif) no-repeat center;
}

It doesn't reflect the gradient.. just the picture...

Thanks, Claudia