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

Posted by claudialucar
claudialucar
1,657 Points

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Claudia,

Please post the css that you're trying.

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
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.

claudialucar
claudialucar
1,657 Points
claudialucar
claudialucar
1,657 Points

That worked out great! Thanks Guil :)

claudialucar
claudialucar
1,657 Points
claudialucar
claudialucar
1,657 Points

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