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 HTML Basics Going Further with HTML Next Steps

Posted by Saajan Bedi
Saajan Bedi
12,174 Points

How to create round image in div with background property

I want to create rounded circle image with border-radius and background property without using additional div . Can it be done Guil Hernandez

2 Answers

Muhammad Khan
Muhammad Khan
Courses Plus Student 8,772 Points

Yes, it is possible and very easy. Please go to your css file and select your id or class property. For example id="idname" or if you are using class then class="classname". Now in your css file type the following code: #idname { margin-top; 30px; width: 75px; border-radius: 50%;
border; 2px solid blue; }
OR (if using class):
.classname { margin-top; 30px; width: 75px; border-radius: 50%;
border; 2px solid blue; } Note: border-radius: 50% make the image round. Hope this help!

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Yes it is possible. Inside your css file select the div element with 'class' or 'id' property. For example:

In your .html file: <div id="whatever"></div> or <div class="whatever"></div>. Give your div element whatever "id" or "class" property.

And in your .css file:

#whatever {
   height: 25px;
   width: 25px;
   border-radius: 50%;
}

or

.whatever {
   height: 25px;
   width: 25px;
   border-radius: 50%;
}

But there are many solutions. Hope this help!

Saajan Bedi
Saajan Bedi
12,174 Points

Not the Answer I was looking for. I know i can use border-radius 50%. but I'm trying to implement this in header just like Guil did in this video at around 1:50 to 2:00 . I have Already done this in one way using position absolute and border-radius property on image. But its not the perfect solution.

check snapshot for more info. https://w.trhou.se/cpzdt6ai9q