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

Adding radius to the corner of a padded background image?

Lets say I have a div element in the html file

< div class="corner-test">Random text< /div>

And in the css

.corner-test { max-width: 100%; margin: 0; padding: 10% 0% 10% 30%; background-image: url('../img/corner-test.jpg'); background-size: contain; background-repeat: no-repeat; text-align: center; }

My question is: How can I give radius to the corners of the image (only the image) thats supposed to be on the left side of the div?

3 Answers

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points
.corner-test { max-width: 100%; margin: 0; padding: 10% 0% 10% 30%; background-image: url('../img/corner-test.jpg'); background-size: contain; background-repeat: no-repeat; text-align: center; border-radius: 25px; }

Just add it to the end of your existing code.

That gives a radius to the entire content of the div element. But since the image is not filling the div only its upper-left and bottom-left parts are rounded.

What I asked in the topic is how to give all the corners of the image a nice rounding. :)

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points

Add the code (px values for example) border-radius=25px; to your background image element code.

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points

They cover that concept in detail a little further in the CSS course, he will demonstrate the correct procedure as well.

Could you give me an example based on the code in the topic that where to put it exactly?

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points

Ah, my mistake. I'm not aware of a way to do that without using outside tools or some major gymnastics.

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points

You could go the route of making the background image its own html element, but that would be a bit messier. Perhaps a mod can weigh in with an answer. I'll continue looking and let you know if I find a solution.

Thx anyway ^^ I know if I put the image into a different div and adjust the sizes its easily achievable, but wanted to reduce the amount of boxes so was curious if its possible with a background image.