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

CSS

Posted by Ryan Decker
Ryan Decker
3,451 Points

How the nuts do I get this image to display as a circle??

I've tried a border radius of 50%. I've tried making the image a set pixel value and making the border radius half of that value. I've tried making a custom CSS class and applied it to the image. What am I missing on this one??

/*-----------General-------------*/

* {box-sizing:
    border-box;
  }
body {
    margin: 0;
      font: 1em/1.2 "Helvetica Neue", Arial, sans-serif;
    width: 100%;
}


#state {width: 100px;
margin: 0;}

img {width: 100%;}


/*-----------Font/Size-------------*/

h1, h2 {
    color: #fff;
}


h1 {
    font: 6rem 'Russo One';
    padding-bottom: 5px;
    padding-top: 10px; 
}



h2 {font-size: 2rem;}



/*-----------NAV-------------*/

.nav {padding-left: 0;}

 li {display:inline-block;
     color: #fff;
     margin: 10px 20px 0 20px;
}

li:hover {color: gold;
font-size: 1.8rem;} 

ul {list-style: none;
  font-size: 1.5rem;
}

/*-----------Header-------------*/

#header {
    text-align:center;
    padding-top: 50px;
    background: 
    linear-gradient(0deg, #fff 2%, transparent),
    url('../img/sky2.jpg') no-repeat center;
    background-size: cover; 
    padding-bottom: 300px;


}

/*-----------Gallery-----*/

#container {width: 80%;
margin: 100px auto;}

.one {width: 80%;
margin: auto;}




/*-----------QUERIES-------------*/

@media (max-width: 768px) { 
h1 {font-size: 4rem;} 
.one {width: 80%;
margin: auto;}
} 

@media (max-width: 450px) { h1 {font-size: 3rem;}
.one {width: 80%;
margin: auto;}
} 
 ```css


```html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pittsburgh</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

  <div id="header">
    <ul class="nav">
     <a href="#"><li> Home </li></a>
     <a href="#"><li> About </li></a>
     <a href="#"><li> Info </li></a>
    </ul>
    <h1>PITTSBURGH</h1>
    <div id="pa"><img src="img/pa.png" id="state"></div>
    <h2>The Steel City</h2>
    <h2>&hArr;</h2>
  </div>

  <div id="container">
    <div class="one">
    <img src="img/square.jpg" > /*------This image right here!-----*/
    </div>
  </div>

5 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

The code you provided works. My only guess assumption is that you are using an image that is not a square. Here is your Code I've changed the images to square dummy images to show you the code you have works. I did not make any other alterations.

Ryan Decker
Ryan Decker
3,451 Points

The image was not a square! Thanks for troubleshooting this one.

Robert McCormick
Robert McCormick
4,400 Points
Robert McCormick
Robert McCormick
4,400 Points

I'm no expert by any means, but my understanding is that a border radius of 100% is what rounds the corners enough to create a circle. Have you tried 100%?

Ryan Decker
Ryan Decker
3,451 Points

Yes sir I have. Whether it's 50% or 100% that I'm dropping in I get an oval or nothing at all!

Greg Kaleka
Greg Kaleka
39,021 Points

You'll get nothing at all with border-radius: 100% because you're essentially cropping out the entire picture. 50% gets you a circle... Unless your picture is not a square! If it's not a square you'll get an oval. I'll update my answer, since this is probably the issue.

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Ryan,

Your code doesn't include anything about border-radius. Where are you adding that rule?

Edit: Based on your comment elsewhere, it sounds like your image might not be a square. If it's a non-square rectangle, border-radius: 50% will make it an oval. If that's what's happening, it's working perfectly.

P.S. your "closing" tick marks don't need the code type - just the opening ones:

```CSS

[your code]

```

Ryan Decker
Ryan Decker
3,451 Points

I added the rule under the general comment... I've also tried 50%. Both 50% and 100% get me an oval.

/*-----------General-------------*/

* {box-sizing:
    border-box;
  }
body {
    margin: 0;
      font: 1em/1.2 "Helvetica Neue", Arial, sans-serif;
    width: 100%;
}


#state {width: 100px;
margin: 0;}

img {width: 100%;}

.round {border-radius: 100%;}


/*-----------Font/Size-------------*/

h1, h2 {
    color: #fff;
}


h1 {
    font: 6rem 'Russo One';
    padding-bottom: 5px;
    padding-top: 10px; 
}



h2 {font-size: 2rem;}



/*-----------NAV-------------*/

.nav {padding-left: 0;}

 li {display:inline-block;
     color: #fff;
     margin: 10px 20px 0 20px;
}

li:hover {color: gold;
font-size: 1.8rem;} 

ul {list-style: none;
  font-size: 1.5rem;
}

/*-----------Header-------------*/

#header {
    text-align:center;
    padding-top: 50px;
    background: 
    linear-gradient(0deg, #fff 2%, transparent),
    url('../img/sky2.jpg') no-repeat center;
    background-size: cover; 
    padding-bottom: 300px;


}

/*-----------Gallery-----*/

#container {width: 80%;
margin: 100px auto;}

.one {width: 80%;
margin: auto;}




/*-----------QUERIES-------------*/

@media (max-width: 768px) { 
h1 {font-size: 4rem;} 
.one {width: 80%;
margin: auto;}
} 

@media (max-width: 450px) { h1 {font-size: 3rem;}
.one {width: 80%;
margin: auto;}
} 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pittsburgh</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

  <div id="header">
    <ul class="nav">
     <a href="#"><li> Home </li></a>
     <a href="#"><li> About </li></a>
     <a href="#"><li> Info </li></a>
    </ul>
    <h1>PITTSBURGH</h1>
    <div id="pa"><img src="img/pa.png" id="state"></div>
    <h2>The Steel City</h2>
    <h2>&hArr;</h2>
  </div>

  <div id="container">
    <div class="one">
    <img src="img/square.jpg" class="round">
    </div>
  </div>
Steve Moore
Steve Moore
3,473 Points
Steve Moore
Steve Moore
3,473 Points

Hi Ryan,

Have you tried adding

height:auto;

to the img element in your css so that the aspect ratio of your image is maintained? (You currently just have width: 100%;)

Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points
Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

Have you tried a border-radius of 100%? 50% isn't enough for a circle.

Greg Kaleka
Greg Kaleka
39,021 Points

50% is enough for a circle, since there are two corners per side :)