background image not displayed

Question

I put this background into my css file under but it is not displaying. I have tried putting the image into a folder inside my project folder named img as well as into the main part of the folder where my html page is saved. Neither seems to work.

              html {
              background: #111;
              background-image: url('old_moon.png');
              padding: 60px;
              }

This is the current version that is not working. I also tried this:

               html {
               background: #111;
               background-image: url('img/oldmoon.jpg');
               padding: 60px;
               }

The image files are different in each because, as I said, I tried two different version of the file in two different places. My project folder looks like this:

Main folder>

              css> style.css
              img> oldmoon.jpg
             .html
              old_moon.png

Thanks for any insight you can give on why this background image is not displaying.

Answer 1 · 2014-01-20T08:14:05Z

January 20, 2014 8:14am

I also tried this:

html { background-image: url('img/oldmoon.jpg'); background-color: #111; padding: 60px; }

By the way, the image I am trying to use is from subtlepatterns.com

Answer 2 · 2014-01-20T11:32:37Z

January 20, 2014 11:32am

Your code seems fine, as I see you have applied a background-color property to your html, does it shows up? Please copy&paste your html code and your browser version help solving the problem.

Answer 3 · 2014-01-22T09:52:36Z

January 22, 2014 9:52am

I thought so too. Yes, the background color does show up. I am using google chrome. The only thing I can figure is that I am doing something wrong when creating my project folder. Here is the HTML:

Answer 4 · 2014-01-22T09:53:17Z

January 22, 2014 9:53am

<body>

  <header>
    <title>Web Developer</title>
    <img src="img/portheader2.jpg">
    <link rel="stylesheet" href="css/style.css">
  </header>

  <nav>
    <!-- navigation menu goes in here -->
  </nav>

  <section id="sidebar1">

  </section>

  <section id="main">
    <p>Current or potential customers may be seeking you out on the web! Let me help you establish your presence online.</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Wordpress</li>
    </ul>
  </section>

  <aside>
  <a href="http://referrals.trhou.se/jamescallahan" target="_blank"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"/></a>
  </aside>

  <footer>
    <!-- footer content goes in here -->
  </footer>

</body>```

Answer 5 · 2014-01-22T09:57:17Z

January 22, 2014 9:57am

this part is a repeat of the above so has been deleted.

Answer 6 · 2014-01-22T09:58:48Z

January 22, 2014 9:58am

My HTML is now showing up. Thanks for the help there.

Answer 7 · 2014-01-22T10:03:08Z

January 22, 2014 10:03am

sorry for the above confusion.

http://codepen.io/brockcallahan/pen/BGaLm

Answer 8 · 2014-01-22T15:20:08Z

January 22, 2014 3:20pm

Oh, it seems like we are misleading..

There are several points I gotta make them clear here:

The reason why you can't make your HTML showing up pretty here in reply is because you type ' instead of `, which causes it. You can check the Markdown Cheatshee right under the reply textarea or read this Markdown
Now let's focus on your project, generally, the best practice create the structure is by applying a background-image to your <body> tag instead of <html> tag, and apply a wrapper instead:

    <html>
      <body>
        <content class="wrapper"></content>
      </body>
    </html>

The reason why your background-image didn't show up is because of the relative links, now let's think this over: you are linking to the image in which file? style.css! Where is the image folder? Actually it's the sibling of CSS folder. So, what's the relationship between CSS file and Style.css? I think you have got the answer. (to looking up the current forder, you can use `../ syntax to help, incase of you forget it)

Answer 9 · 2014-01-22T15:50:42Z

January 22, 2014 3:50pm

Thanks for trying, but I don't understand your explanation. I guess I need to go back over some stuff. I thought if I did this:

background-image: url('img/oldmoon');

that I was linking to the image folder and that it was supposed to give me a background image . Am I to move the image into the css folder? Even trying to apply the image as a background in my body section of the css gives no image.

I tried putting the image like this:

<content class="wrapper"> <img src="img/oldmoon.jpg"> <content>

The image now comes up, but not as the background. I intuit that you are saying I should now style this image to become my background?This is a different method that I thought I was learning to begin with.

I wanted to have the body section of my site partitioned off from the background. That's why I was putting the image in the html tag. And I thought that that method of setting the background-image from the CSS page was supposed to work.

I don't doubt that you have pinpointed the problem but your explanation and the thing about wrappers has me confused.

"In css, any element can have a background color or image applied." - Guil

I appreciate your help.

Answer 10 · 2014-01-22T16:35:24Z

January 22, 2014 4:35pm

Tried this:

<body>

<content class="wrapper">



  <header>
    <title>Web Developer</title>
    <img src="img/portheader2.jpg">
    <link rel="stylesheet" href="css/style.css">

  </header>

  <nav>
    <ul class="list">
        <li>About</li>
        <li>Portfolio</li>
        <li>Contact</li>
    </ul>
  </nav>

  <section id="sidebar1">

  </section>

  <section id="main">
    <p>Current or potential customers may be seeking you out on the web! Let me help you establish your presence online.</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Wordpress</li>
    </ul>
  </section>

  <aside>
  <a href="http://referrals.trhou.se/jamescallahan" target="_blank"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"/></a>
  </aside>

  <footer>
    <!-- footer content goes in here -->
  </footer>

</content>
</body> ```

In my css:

``` .wrapper {
background-image: url('img/oldmoon.jpg');
}

and

.wrapper {
background-image: url('../img/oldmoon.jpg');
} ```

To no avail.

Answer 11 · 2014-01-23T00:52:47Z

January 23, 2014 12:52am

Let me get you through this:

Now we are asking for image under img folder, and we are requesting it from style.css(that's where we write our background-image: url() ), first we look up a level, get out of the css folder and stand with css, img, html and old_moon.jpg. So what's next? We need to get the image under the img folder, we do this by img/oldmoon.jpg.

Here, final answer is: ../img/oldmoon.jpg

As for wrapper, let's say you want to add some padding to the main content, you do this by applying html tag some padding. We usually do this way by add a wrapper inside body tag and add some padding to the body tag, same as the background-image, it's applied to body. We only define properties like: font-family, font-size, font-color on the html tag, no structure properties like margin and padding.

Answer 12 · 2014-01-23T00:54:58Z

January 23, 2014 12:54am

I'm not a native speaker, I have to use more words to explain myself, sorry for any misunderstanding it causes.

Answer 13 · 2014-01-23T06:55:06Z

January 23, 2014 6:55am

Look in my HTML thing at the bottom of my last post. I show where I tried that:

../img/oldmoon.jpg

it did not work.

Answer 14 · 2014-01-23T07:37:13Z

January 23, 2014 7:37am

Let me show you one simple example, say you are in your room programming, suddenly you feel thirsty, the water is in the kitchen. In order to get the water, you gotta follow the steps:

get out of your room
walk into kitchen

So this is exactly what you are doing in your CSS, you look up a level and look for it under img folder this way:

../img/example.jpg

What you are doing in your HTML just like you are standing near the door of the kitchen, all you need to do is one thing: walk into kitchen

Thus, in your HTML, you request the image this way:

img/example.jpg

Hope you get the point, James.

Answer 15 · 2014-01-23T07:58:25Z

January 23, 2014 7:58am

Yes, I understand the point you are making. We are not communicating very well, perhaps because of the language difficulty. Still, I appreciate your helping. Yes, I do understand that I need to back out of the CSS file by this method:

../img/oldmoon.jpg

the problem is that it is still not working.

Welcome to the Treehouse Community

Looking to learn something new?

Bob Sutherton

Bob Sutherton

background image not displayed

15 Answers

Bob Sutherton

Bob Sutherton

klam tine

klam tine

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

klam tine

klam tine

Bob Sutherton

Bob Sutherton

Bob Sutherton

Bob Sutherton

klam tine

klam tine

klam tine

klam tine

klam tine

klam tine

Bob Sutherton

Bob Sutherton

klam tine

klam tine

Bob Sutherton

Bob Sutherton