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
Trevis Kelley
Courses Plus Student 3,777 PointsGradient over image not showing in browser. Anything I'm missing?
I am attempting to build my own website with the info I have learned here. One of the videos talked about gradients over a background image. I am attempting to do a gradient with black going to black as a way of darkening the image so that my header text shows up better. Below is the code I am using:
HTML header:
<header>
<span></span>
<h1 id="main-heading" class="heading">Jojo's Hair</h1>
<h2 class="heading">Welcome To Jojo's Hair</h2>
<p class="paragraph">At Jojo's Hair, you will always feel at home with expert hair stylists and a friendly atmosphere!</p>
<img class="salon-image" src="salon.jpg" alt="This is me at my salon">
<nav>
<ul class="main-nav">
<li class="main-nav-li"><a class="main-nav-a" href="index.html">Home</a></li>
<li class="main-nav-li"><a class="main-nav-a" href="services.html">Services</a></li>
<li class="main-nav-li"><a class="main-nav-a" href="products.html">Products</a></li>
<li class="main-nav-li"><a class="main-nav-a" href="about.html">About</a></li>
<li class="main-nav-li"><a class="main-nav-a" href="stylists.html">Stylists</a></li>
<li class="main-nav-li"><a class="main-nav-a" href="book.html">Book</a></li>
</ul>
</nav>
</header>
CSS header:
header {
color: purple;
text-align: center;
text-shadow: 1px 2px white;
font-family: Arial;
background-image: linear-gradient(to top, rgba (0, 0, 0, 0.5), rgba (0, 0, 0, 0.5)), url(cuttinghair.jpg);
background-size: 100% 100%;
background-position: center;
height: 450px;
margin-top: 0;
}
I haven't commented anything out yet, so let me know if any piece of this is confusing. I have been messing around with the background-image a lot, so that piece is not as cleaned up as it could be. I have all files in the same folder for now as well.
Currently, no background image is displayed. If I change it to
background-image: linear-gradient(to top, rgba (0, 0, 0, 0.5), rgba (0, 0, 0, 0.5));
background-image: url(cuttinghair.jpg);
I then get the background image with no overlay, which makes sense to me. It also proves that the image works. If I take out the image, the linear gradient does not appear, so I must be missing something there. I just cannot figure out what!
I appreciate any help anyone can give! This has been stumping me for 3 days!
1 Answer
Steven Parker
231,269 PointsIn the first example, there are spaces between the words "rgba" and the parentheses with the arguments. This probably causes that entire line to be ignored.
In the second case, there are two separate "background-image" property settings, so it would be normal for the second one to override the first (even if it had no syntax errors).
Trevis Kelley
Courses Plus Student 3,777 PointsThat's it! My old code had the spaces, but my new one doesn't! Thanks for the reply!
Trevis Kelley
Courses Plus Student 3,777 PointsTrevis Kelley
Courses Plus Student 3,777 PointsNevermind,
I think it was my atom.io editor. I retyped the background tag in and it worked! Now on to better problems!
Thank you all!