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 Nicole Rudy
Nicole Rudy
913 Points

Border-Radius and Background-Image Icons

I added in my own personal image of 60px by 60px for an Instagram picture instead of twitter. I wanted to make this item circular and was successful on the footer by using border-radius: 100%; This produced the style I was attempting to achieve. However, when I tried to do the same for the contact page background-image it curves only the left half and makes it almost completely missing. So, I altered this to 20px instead and it make a perfectly circular left half and the right half is square. My code is below. What am I missing or how can I fix this issue?

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; border-radius: 20px; }

.contact-info li.instagram a { background-image: url('../img/instagram.png'); }

1 Answer

Lee Geertsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Lee Geertsen
Java Web Development Techdegree Student 16,749 Points
Lee Geertsen
.a{fill-rule:evenodd;}techdegree
Lee Geertsen
Java Web Development Techdegree Student 16,749 Points

You need to make sure that your item is a square to make it round. It's maybe easier to set a fixed width and height, like 20px (or 20% to make it resize to the parent element) depending on the way you want it. And then add a border-radius of 100% to make it round. Also remove your bottom-padding of 30px, that can also cause problems, it's better to use margin in this case.

Himanshu Chopra
Himanshu Chopra
3,055 Points
Himanshu Chopra
Himanshu Chopra
3,055 Points

Hello Nicole,

Well when you add border-radius: 100% for your .social-icon it becomes circular because here you have your icon in rectangular shape and it has fixed width and height which is 20px so it makes it circular when you add border-radius of 100%, on the other hand image for .contact-info are coming out from the background-image which is a css property & your .contact-info a is set to display block that means it will take full width of it's parent container.

To achieve the desired output you should first use a rectangular icons and then call them from your html instead of css background-image and set them to fixed width and height and then add the border-radius of 100% to them and it will work.

Created a Snapshot for you. Please take a look https://w.trhou.se/dyg404ov09

let me know if you have any confusion .