8. You've done it! Is there code that I can use that we have already learned to add an image to the circles?


Replace this line with your code.



I can only help you if I can see your code.
Please paste in your code + error + lesson


You can regular images (<img>), which is possible but difficult. It is easier to background


Like @stetim94 said, you can use background-image, which is easier, or you can put in an <img> tag with border-radius: 100% which will make the image circular, and fit in the circle.


but if you use regular images (<img>) you would also need to position them, if you then also want text, then it is so much easier to use background


Agreed. I would use background everytime, I was just saying what the other (harder) option was.



Image does not show.


parents {


What am I missing?


Make it

background-image: url("http://imgur.com/Ar6yYFG")



Still no image.


parents {




Put url before the opening (


Sorry I am so confused. Which url?


Copy and paste this in for the background image:

background-image: url("http://imgur.com/Ar6yYFG")


This is the code that worked.#parents {
background-image: url("http://i.imgur.com/Ar6yYFG.jpg")


Thanks jibblyj!

P.S. image now shows but only the top left corner of the image. I need the center of the image.



align: center;


Align: center did not work.



width: 100%;
height: 100%;


That makes the entire circle disappear.


Can you show us your full html + css code so we can actually see the problem and try and fix it, and then tell you?



Since adding height and width at 100% made my picture disappear, it is not included.

I don't know why my html is not showing up.

<!DOCTYPE html>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend">  </div>
		<div class="friend">  </div>
		<div class="enemy">  </div>
		<div class="enemy" id="archnemesis">  </div>
		<div class="family">  </div>
		<div class="family" id="parents">  </div>

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	width: 100px;
    border: 2px solid black;	
.friend {
    border: 2px dashed #008000;
.family {
    border: 2px dashed #0000FF
.enemy {
    border: 2px dashed #FF0000;
#best_friend {
    border: 4px solid #00C957;
#archnemesis {
    border: 4px solid #CC0000;

#parents {
    background-image: url("http://i.imgur.com/Ar6yYFG.jpg");


I put your code in a bin, and it looks fine, what is the problem? You need to use backticks (left of your 1/above your tab key. You used apostrophes.