Sorting your friends


#1

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?

Thanks


#2

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(http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Sir_Winston_S_Churchill.jpg/245px-Sir_Winston_S_Churchill.jpg) 40% 25% no-repeat;
    background-clip: padding-box;
    border: 4px solid #00C957;
}

#archnemesis {
    background: transparent url(http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg) 45% 30% no-repeat;
    background-clip: padding-box;
    border: 4px solid #cc0000;
}

#3

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