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 Kalidh Mohamed
Kalidh Mohamed
5,995 Points

How to make a transparent gradient over an image?

Here is the code snipper..

.main-header { padding-top: 170px; height: 850px; background: url("../img/mountains.jpg") no-repeat center; background-image: linear-gradient(#004092, #020202, transparent); background-size: cover; box-shadow: 0px 10px 20px -5px rgba(0,0,0,.8); }

it keeps overriding the mountains.jpg image. I was trying to achieve a similar effect like that of theverge.com. Please helperino.

3 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

There is a really great blog post on CSS Tricks showing how to do this:

https://css-tricks.com/tinted-images-multiple-backgrounds/

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey there,

try to write both the gradient and the background image into one CSS declaration and divide it by a comma and it should work.

The code would look like this then:

.main-header { 
padding-top: 170px; 
height: 850px; 
background: linear-gradient(#004092, #020202, transparent), url("../img/mountains.jpg") no-repeat center; 
background-size: cover; 
box-shadow: 0px 10px 20px -5px rgba(0,0,0,.8); 
}
Peter Ramsing
Peter Ramsing
16,814 Points
Peter Ramsing
Peter Ramsing
16,814 Points

If you're not wanting to have the image content in the css you could do it using the ::after element.

.main-header::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, transparent 0%, white 100%);
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: '';
}

http://codepen.io/peterramsing/pen/jAxVBB/ http://peter.coffee/how-to-use-css-pseudo-elements-to-add-a-gradient-to-images