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!

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

Nandakishore J
Nandakishore J
4,641 Points
Posted by Nandakishore J
Nandakishore J
4,641 Points

The background image of the div fails to come. Please do help me make it correct.

I have entered the HTML and CSS codes below. What the problem, is that the background image fails to appear. Please do help. Thanks in advance.

HTML

    <!DOCTYPE html>
    <html>
      <head>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,300,400' rel='stylesheet' type='text/css'>
      </head>
      <body>
        <div class="parallax-1 parallax">
          <div class="descript-parallax">
            <span>Description for the image</span><br>
            <span class="photo-descript">Copyright someone</span>
          </div>
        </div>
      </body>
    </html>

CSS

    .parallax-1 {
      height: 200px;
      width: 100%;
      background: linear-gradient(to bottom, #000 -10%, transparent 30%),
                  linear-gradient(to top, #000 -10%%, transparent 30%),
                  url('http://lorempixel.com/400/200');
      background-size: cover;
    }

    .parallax {
      width: 100%;
    }

    .descript {
      background: #f2f2f2;
      font-family: 'open sans', sans-serif;
      font-style: italic;
      font-weight: 200;
      font-size: 0.7em;
      padding: 5px 10px;
    }

MOD: edited to format code quotes

3 Answers

pi R
pi R
12,720 Points
pi R
pi R
12,720 Points

Hi ! Have you included your css stylesheet in the HTML file? In the code you show us, there's only the font.

Nandakishore J
Nandakishore J
4,641 Points
Nandakishore J
Nandakishore J
4,641 Points

Of course yes. I did include it. This is just a small fraction of the code.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Please give us a complete copy of your code if you want more input.

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points
Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hello Nandakishore, how are you? If the code provided in the example is 100% identical from your workspace (copy - paste) there's a tiny issue I assume you overlooked, just by speed writting your code.

As funny as it may seam, but I think you forgot to include your stylesheet in your html code. The line :

<link rel="stylesheet" href="css/style.css">   <!-- or whatever the path you are using for your css document -->

is missing in your head tag.

Try fixing that and you'll be on your way = ). Don't worry, these type of mistakes happen to me all the time (I sometimes even make a simple typo, but you know how computers are unforgiving, hehe). Best thing to do perhaps (or the thing I'm doing each time I include a new stylesheet) is to make a drastic change to your markup styling, something like:

body {
  background: red;
}

only to test if the stylesheet is properly attached to your HTML document. It is also a good way of debugging your code.

Happy coding and much success! Cheers

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

All three answers are correct, but this is the most complete of the three.

ravindra barthwal
ravindra barthwal
2,271 Points
ravindra barthwal
ravindra barthwal
2,271 Points

Yes! Buddy link to your css stylesheet as well as fix the url path for the parallax-1 background it is looking incomplete

Cheers