Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

John Levy
John Levy
1,451 Points

Trying to make the background image placed in a box into a circle.

I have made several boxes and I am trying to make the background image placed in the box a circle. If it was originally a square how do I make each image a circle or does the image have to be a circle to begin with?

The html code is- <div class="box">igbodybuildingworld</div>

The CSS code is- .box {

background: url(igbodybuildingworld.jpg); background-size: 250px; background-repeat: no-repeat; background-position: top center; float: left; color: black; font-weight: bold; font-size: 26px; text-align: center; line-height: 400px; background-color: white; width: 280px; margin-left: 10px; margin-right: 10px; margin-top: 30px; padding: 5px; border: 2px solid black; height: 400px

Thanks in advance John

Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="test.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
<div class="box">
<h3>Example text</h3>
</div>
  </body>
</html>
* {
  box-sizing: border-box;
}


.box {
  background: url(img/thisisme.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  color: black;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  padding-top: 90px;
}

I noticed you put text directly inside your .box. Don't do this. Put it into a proper element like a <p> or a <h>. Also in css put the box-sizing property with the value border-box. So you won't get any weird changes in your widths and heights when adding padding and margin.

My solution to your problem is using the border-radius property. By giving your .box this property and the value 50%, the corners will round and a circle will be shown. Beware that you keep width and height in the same proportions, els wise a circle shape is not possible.

Also add the property -> background-size: cover, so that your background image takes up the full space.

1 Answer

John Levy
John Levy
1,451 Points

Thanks for your help. As it was mentioned not to put the text directly into the .box where do I put it so it goes inside the boxes I made? I tried using a element <p> but I cant get the text in the box. Thanks in advance