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!

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

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.


Hi Claudia,

Please post the css that you're trying.

3 Answers

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.

That worked out great! Thanks Guil :)

Good morning Jason,

Thanks for the response. Here is the code:


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

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