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 Transparent Gradients and Multiple Backgrounds

Ryan Decker
Ryan Decker
3,451 Points
Posted by Ryan Decker
Ryan Decker
3,451 Points

Why can't I get the transparent background image to show.

Everything appears correctly until I add the gradient to my CSS code. Code I'm referring to is in the Header notes in the CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

    <div id="main-header">
      <h1> VISIT MONTANA FOR WILDLIFE ADVENTURES </h1>
      <span> Wildnerness Awaits in the Mountains of Montana </span> 
    </div>


    <div id="container">
        <div id="column1">
          <img src="img/moose.jpg">
          <h2> We have lots of critters</h2>
          <p> Step inside the majestic mountains of Montana where you will be deligheted to find many critters.</p>
        </div>

        <div id="column2">
          <img src="img/deer.jpg">
          <h2> More critters than ever!</h2>
          </p> Imagine a world of furry beasts that would let you take a ride for a simple ruffle of fur.
        </div>
    </div>

* {box-sizing: border-box;}



body {
    margin: 0;
    font: 1em/1.2 "Helvetica Neue", Arial, sans-serif;}


/*-----------Header-----------------------*/

  #main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%;),
             #ffa949 url('../img/mt.jpeg') no-repeat center;
  background-size: cover;
  text-align: center;
}



/*----------Text Styles-------------------*/

h1 {
  font-size: 3rem;
}


h2 {
  font-size: 1.2rem;
  font-weight: bold;
}



span {
  font-size 1.5rem;
  font-weight: bold;
  border-bottom: 3px solid white;
  padding-bottom: 10px;
}

#main-header {
  color: white;
}



/*----------Layout-------------------*/


img {
  width: 100%;
}



#container {
  width: 60%;
  margin: 100px auto;
  border-top: 3px solid black;
  padding-top: 30px;

}



#column1, #column2 {
  width: 45%;
}

2 Answers

Michael Hess
Michael Hess
24,512 Points
Michael Hess
Michael Hess
24,512 Points

Hi Ryan.

It looks there is a semicolon, inside the parentheses, after transparent 90%

background: linear-gradient(#ffa949, transparent 90%;),

Try ths:

#main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%),
              linear-gradient(0deg, #fff, transparent),
              #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
}

Hope this helps :)

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

That didn't seem to work :( Michael Hess

AR Ehsan
AR Ehsan
7,912 Points
AR Ehsan
AR Ehsan
7,912 Points

Don't put (transparent 90%) (background: linear-gradient(#ffa949, transparent 90%;), #ffa949 url('../img/mt.jpeg') no-repeat center;)