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 trialRyan Decker
3,451 PointsWhy 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
24,512 PointsHi 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 :)
AR Ehsan
7,912 PointsDon't put (transparent 90%) (background: linear-gradient(#ffa949, transparent 90%;), #ffa949 url('../img/mt.jpeg') no-repeat center;)
Ryan Decker
3,451 PointsRyan Decker
3,451 PointsThat didn't seem to work :( Michael Hess