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 trial

HTML How to Make a Website Adding Pages to a Website Style New Pages

Posted by Bridget Word
Bridget Word
3,237 Points

I've applied the border radius of 100% and my picture still isn't a circle. Why am I not being able to get this to work

I've applied the border radius of 100% and my picture still isn't a circle. Why am I not being able to get this to work?

5 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Bridget,

Without seeing your code I'm afraid I'm playing guessing games as to why the CSS isn't working.

You're right that border-radius of 100% has the effect of making your element appear to be a circle.

.element {
   border-radius: 100%
}

You might want to post your CSS code but in the mean time things to check could be

  • Are you using the right selector?
  • Is your CSS file linked correctly on your HTML
  • Are you using the right property and value as shown above?
  • Is there another piece of code that's ovverriding the style such as a duplicate selector?

These are all things that can affect the display of the styles. Good luck :)

Bridget Word
Bridget Word
3,237 Points

Below is my html code for the About page and the CSS. Let me know if I need to change anything. I will check on the other things you've mentioned.

<section> <img src="img/nick.jpg" alt="Photo of Nick Pettite" class="profile-picture">

/**************** Page: About ****************/

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Bridget,

See Jonathan's first bullet point. You have a mismatch between the class name in the html file and the selector in the css.

You used "profile-picture" in the html but "profile-photo" in the css.

I think it was "profile-photo" in the course but it doesn't really matter which one you use so long as they match.

Kevin DeLaune
Kevin DeLaune
579 Points
Kevin DeLaune
Kevin DeLaune
579 Points

Also, keep in mind the dimensions of your original photo you are trying to manipulate. If you don't have a photo that is equal in height and width to begin with, your photo will not be a circle when applying "border-radius".

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello Bridget,

When creating a circle set the border-radius to 50%.

Hope this helps.

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello again...

Just to add you are probably better off creating an empty div and then giving it a background-image. You can then set the div's border-radius to 50%. This is better because it will not affect your image. You will have to resize the image however until it fits into the desired div.

Bridget Word
Bridget Word
3,237 Points

I tried the 50% and it didn't work.

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello,

Try this approach (see below). You create an empty div and set it to have background image in your CSS. This creates a perfect circle. Make sure however that you make both the height and width the same for the div.

 <div class="box">
     <!--Set an image in CSS-->
 </div>

.box {
    height: 200px;
    width: 200px;
    background-image: url("/images/website.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}

:)

Bridget Word
Bridget Word
3,237 Points

Here is my html code and css for the About page. I tried what you said and all it did was make the picture a smaller square and my text goes over the top of it.

<div class="box"><img src="img/nick.jpg" alt="Photo of Nick Pettite" class="profile-picture"></div>

/**************** Page: About ****************/

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

.box { height: 200px; width: 200px; background-image: url("img/nick.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 50%; }

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Bridget,

Did you have a chance to look at the comment I left to Jonathan's answer? That's what I think your problem is.

You shouldn't have an extra div around your image. You're not instructed to do that in the course.

You only need the img element.

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello,

I have looked at your code Bridget, and you do not need to specify the image in your HTML only in your CSS as the background-image. I have created a workspace with a working example of the code.

Workspace - https://w.trhou.se/b063oj757e

This is a stubborn problem :)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Alex,

If you review the video for this course and the associated code you'll see that the image is supposed to be in the html.

I'm not saying that what you're suggesting is wrong, it would be the right thing to do in certain situations, but it deviates from what is being taught in this course.

The image in question is a profile image that is meant to be part of the content of the page. It's more appropriate to put it in the html.

css background images are generally reserved for stylistic images that are there as part of the design and not part of the content.