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


#1



Replace this line with your code.


#2

Hi,

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


#3

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


#4

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.


#5

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


#6

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


#7

https://www.codecademy.com/courses/web-beginner-en-jNuXw/0/8?curriculum_id=50579fb998b470000202dc8b

Image does not show.

'''

parents {

background-image:"http://imgur.com/Ar6yYFG"

}
'''
What am I missing?


#8

Make it

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

#9

https://www.codecademy.com/en/courses/web-beginner-en-jNuXw/0/8?curriculum_id=50579fb998b470000202dc8b

Still no image.

'''

parents {

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

}
'''


#10

Put url before the opening (


#11

Sorry I am so confused. Which url?


#12

Copy and paste this in for the background image:

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

#13

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.


#14

Try

align: center;

#15

Align: center did not work.


#16

Try

width: 100%;
height: 100%;

#17

That makes the entire circle disappear.


#18

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?


#19

https://www.codecademy.com/en/courses/web-beginner-en-jNuXw/0/8?curriculum_id=50579fb998b470000202dc8b

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>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--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>
	</body>
</html>

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height:100px;
	width: 100px;
	border-radius:100%;
    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");
  }

#20

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.