How to add a background image

It's explained in later videos, but basically you'd use this:

background-image:url("pathofimage.jpg");

There are some other things too, like background-repeat and the like. Check out this page: http://www.w3schools.com/cssref/pr_background-image.asp

background: url('path to your image file');

or

background-image: url('path to your image file');

example:

div{

background-image: url('myimage.png');

background-color: #000000;

}

Absolutely! To use a background image on an element, just use the background-image property:

.selector {
    background-image: url(path/to/image.png);
    background-repeat: no-repeat; /* prevents background image from tiling */
}

CSS has a whole slew of properties for working with backgrounds, including/especially background images. They're all super exciting and can be used to create some really amazing effects. For instance, I was just messing around in a Workspace, and I was able to get a really cool effect working with backgrounds using only about five lines of CSS. I'll work on getting it into a CodePen here for you.

If you check out MDN's page on CSS backgrounds, you can read the full documentation on all the background properties.

Happy coding!

EDIT: CodePen is up! A few more than five lines, but the part that makes everything work is from lines 19-26 in the CSS.

Desired div { background: url("img/your_image.jpg"); }

img is the folder containing your_image. I hope that helps.

All of the above are correct, but it is important to note that if you are storing your image in a separate folder "img" then you will need to put a "/" in front of the "img" in your path to tell the browser to look for your "img" folder in the root directory, like this...

.selector { background-image: url("/img/your_image.jpg"); }

Also, you can use multiple background images by using comma separation, and they will be indexed in the order in which they are entered, like this...

.selector { background-image: url("/img/your_image.jpg"), url("/img/your_image2.jpg") ; }