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!

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

John Levy
John Levy
1,451 Points
Posted by 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
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.

theofanissiassios
theofanissiassios
6,498 Points

The shorthand property "border-radius" should get you there.

https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/border-radius-2

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

1 Answer

John Levy
John Levy
1,451 Points
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