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 How to Make a Website CSS: Cascading Style Sheets What is CSS?

How to add a background image

In stage 4, section 1 of How to make a website, we have learned how to adjust the background color and text color. What about if we wanted to add an image to the background? How do we do that?

5 Answers

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

Ryan Watson
Ryan Watson
5,471 Points

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.

Ian Suy
Ian Suy
6,706 Points

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

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

Corwyn Wilkey
Corwyn Wilkey
7,971 Points

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") ; }