Sorting your friends


So I completed the lesson but I wanted to add images inside the circles.
When I do this the images go in front of the circles - how do I change this?

Also the names of people (Text inside circles) are not placed inside the circles. How do I get them to be in the center of the circles?



We can place the pictures behind the circles, but not as <img> elements. Instead we use CSS's background property.

If you only want one circle per image, then each one will need an id so a selector rule can be written. Eg.

#bff {
    background-image: url( %src_URL );
    background size: 100%;

Remember the circles are not very large, so be sure to use pictures of the same size, approximately 100 x 100 pixels.

#best_friend {
    background: transparent url( 40% 25% no-repeat;
    background-clip: padding-box;
    border: 4px solid #00C957;

#archnemesis {
    background: transparent url( 45% 30% no-repeat;
    background-clip: padding-box;
    border: 4px solid #cc0000;


Background is the easiest way to go, but you can use images, have you done css positioning yet? You need the knowledge to fit everything inside your circles. But i recommend the background. You can read more about background here