How do I add a background image in the CSS file?

Exactly. I updated my answer to include the 3 methods I listed too. The 3rd one is just a variation of the second that allows the destination website i.e. "someimage.com" to pick what protocol to use to accept the connection. Since you are just linking to images, though, picking "http:" is perfectly okay. I just wanted to explain the "//" methodology of linking, because you'll see it used by Youtube if you go to embed something on your page.

Well, background is the shorthand-property for all of the background properties. This means that you can use either one of those you listed because when you use the background property, you can declare what you want inside of it (although the order of the properties does matter).

But, what you are asking for is a part of the background-size property which also happens to be a part of the background shorthand property. If you want the image to take up the entirety of the viewport, you would want to use the value "cover" for it. You might also set a "no-repeat" for the background, as well, if you don't want it to repeat. Let's look at an example using 2 methods:

/* First method */
background-image: url('img/someimage.jpg');
background-size: cover;
background-repeat: no-repeat;

/* OR 
Second method */
background: url('img/someimage.jpg') cover no-repeat;

Either one of those methods of CSS declarations is perfectly fine, and you should use what you feel comfortable with. If you like seeing each property declared individually, use the 1st method. If you like being able to write all of the properties into one declaration, then use the 2nd method. It's completely your preference, and you'll see it being done lots of different ways out in the wild of the web.

Also, just as a side note, there's no need to try to memorize everything because that is virtually impossible. Instead, focus on knowing where you can find the answers you need. The MDN (Mozilla Developer Network aka the same community that makes Firefox) is your friend and is a very handy tool for any aspiring web developer. For more information about the background shorthand property, check out this MDN page: Background.

No, because the image will fill the width of the element. Post your updated code for me.

I'm having no problem adding a background. I would suggest looking into your files. Make sure that the "img" folder is indeed "img" and that "planet.jpg" is spelled exactly like that.

Did you actually look? Because, I am telling you that with that exact code, nothing is wrong at all. Why don't you post your updated HTML with the image in there?

Post your FULL code here. Not snippets from the page, I am talking the entire HTML document and entire CSS document. You have something wrong on your end because I can see that you are using the correct URL.

I think I see your problem. Remember how I was just saying you need to check out file names? Well, you need to do so again with your "Style.css", because I'm 99.9% sure you have "style.css" in your actual files. "Style.css" and "style.css" are two separate file names, because file names are always case sensitive. Change "Style.css" to "style.css" and see if it works.

Also, "normalize.css" needs to be higher up on the page than "style.css" so that it will load those styles first, and not overwrite any styles you do.

Are you using Workspaces? If you're using Workspaces, make sure that "style.css" is in the css folder. The problem is on your end because your code is just find. I replicated it exactly, even downloaded a random image, renamed it to "planet.jpg" and put it in a folder named "img" just to see if I was crazy or not, and it works as expected.

Do you know how to take a screenshot and post it? If not, look up how to do that, and post a screenshot of your screen on here that shows that all of these files are in the directories they are supposed to be in.

Typically that's not the case because most people's HTML files reside in the root directory, but I'm glad you figured it out lol. I hate to say it, but it's about time! XD

Ahhhh, haha, I didn't even think about this the proper way, but I'll explain what's going on.

I was thinking about the HTML files and in my head, I was including the CSS in your HTML files, instead of them being in the proper "css" folder, as is good practice. That was actually my bad.

What we are doing is traversing the file path to go from the css folder into the img folder. This graphic I made shows how that is done via the ".." keyword in a file path. First, it has to go back up to the root directory. Since the root directory is the parent directory of the "css" folder, all we need is one ".." keyword because every ".." keyword we use travels up one folder. Next, we need to go into the "img" folder so that's the 2nd keyword, and then 3rd is the file we're after "planet.jpg".

I could have helped you sooner if I had been thinking correctly! LOL! Here is the graphic:

No problem man! If you ever need help, don't hesitate to tag me on here (same as tagging on Twitter with the @ symbol and my name) or shoot me an email: marcus.parsons@gmail.com. You helped me to remember some things I forgot haha Good luck, Ryan!

It's not a good idea to set the ID of something to the same as a common element such as body. It's better to name them things that don't exist such as container2 or otherContainer. But this is just a side note, not a part of the problem.

Remember how I was telling you that there were different properties for background and you can either set them in one declaration using the background shorthand property or you can do them all individually? The way you are using background-image is incorrect. You either have to split those into:

#body{
background-image: url('img/planet.jpg');
background-repeat: no-repeat;
}

OR

#body {
background: url('img/planet.jpg') no-repeat;
}

background-image is strictly for the background image. The only time you can put other values into a property like that is if you are using the shorthand notation.