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

Posted by S M
S M
892 Points

CSS code not working. Please help

Can someone please help what am I doing wrong with this css code. I am trying to create a background-image in .header class but I just get blank page when I review in browser. please help

.header 
    height: 95vh;
    background-image: linear-gradient (to right bottom, rgba (126, 213, 111, 0.8), #28b485), url("../img/hero.jpg");
    background-size: cover;
    background-position: top;
}

My HTML code

.<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">

        <title>Natours | Exciting tours for adventurous people</title>
    </head>
    <body>
        <header class="header">
            Some text....
        </header>


    </body>
</html>

Thank you

Cheryl Searles
Cheryl Searles
1,172 Points
Cheryl Searles
Cheryl Searles
1,172 Points

I can notice the first curly bracket missing... (after .header)

5 Answers

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Yeah it looks very similar but I think the last breakpoint is that if you have a space between rgba and your (brackets) it doesn't render the colour.

So this won't work...

rgba (126,213,111,.8)

But this will...

rgba(126,213,111,.8)

There are some other minor differences between my code and yours (like I specify 0.8 as .8) but nothing that would stop it working other than that I believe.

S M
S M
892 Points
S M
S M
892 Points

Thank you Cheryl Searles. Just fixed that but still no image is showing or getting the desired effect :(

Cheryl Searles
Cheryl Searles
1,172 Points
Cheryl Searles
Cheryl Searles
1,172 Points

hmmmm well the next thing I always check is my path to the actual image. E.g 'url("../img/hero.jpg")' sometimes the path to the directory is wrong. That is the next thing I would check... also there is a full stop right at the beginning of your html code which I just noticed

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

You're missing an opening curly bracket!

.header

Should be

.header {
S M
S M
892 Points

Thank you I Dilate, I just change that one, but still it's not fixing anything

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Sorry - I was beaten to it before I realised!

I think the problem is using the rgba with the linear-gradient - the minute I switch it to a simple rgb colour or hex it works for me. I dont know the spec for its use - but you might want to check.

This is working for me...

.header {
    height: 95vh;
    background-image: linear-gradient(
      to bottom right,
      rgb(126, 213, 111), #28b485
      );
    background-size: cover;
    background-position: top;
}

Note: I've removed the opacity provided by the rgba with 0.8 and removed the url() just for testing - the later can go back in.

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Ignore my last message, this is working now using rgba opacity:

.header {
    height: 95vh;
    background-image: linear-gradient(
      to bottom right,
      rgba(126,213,111,.8), #28b485
      ), url("../img/hero.jpg");
    background-size: cover;
    background-position: top;
}
S M
S M
892 Points

Thank you so much, it worked! I have just spent few good hours trying to solve this but can you please explain to me what did you different? Maybe I am just tired but when I go through your code and mine they are identical but obviously they are not as yours is working!

Thanks again.