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 trialSamuel Dereb
2,269 PointsHow 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
Travis Joyner
14,553 PointsIt'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
5,471 Pointsbackground: 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;
}
Ryan Duchene
Courses Plus Student 46,022 PointsAbsolutely! 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
6,706 PointsDesired div { background: url("img/your_image.jpg"); }
img is the folder containing your_image. I hope that helps.
Corwyn Wilkey
7,971 PointsAll 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") ; }