How To Put A Radius On A Background Image In Css

Recently I have been dedicating some time to the study of the fundamentals of HTML and CSS. A couple of days agone I wrote a blog mail on my very beginning Front-End Kata. The outcome is this Slack-similar card:

Finished Slack Card

The link to the CodePen: Slack Carte

I decided to write a couple of follow up articles to share a few things I learned through this experience. Information technology isn't mean to teach the basics of CSS, just meant to share ii or iii interesting pieces of info I remembered the nigh 🙂. Today is the first one of the series.

Background Image With Rounded Corners

The HTML lawmaking for the Slack card looks like this:

                                                            <div                class                                  =                  "slack-card"                                >                                                              <div                class                                  =                  "header-with-img"                                >                            …Picture and Name...                                                </div                >                                                              <div                class                                  =                  "fourth dimension-and-engagement"                                >                            ...                                                </div                >                                                              <ul                class                                  =                  "profile-actions"                                >                            ...                                                </ul                >                                                              </div                >                                    

The Contour Picture is a background-image set in .header-with-img, but the rounded corners were set on the parent .slack-card with border-radius. What would happen is that while the .slack-carte du jour would be rounded equally expected, information technology wouldn't clip the background image of .header-with-img and the epitome would be visible exterior the boundaries of .slack-bill of fare.

Hither is a picture presenting the problem, I added transparency and exaggerated the border-radius to highlight the effect:

Profile Flick Alluvion

What's the fix? Well, another way of describing the trouble would be to say the .header-with-img was overflowing from the .slack-card container. The fix to allow clipping was but to add overflow: hidden to .slack-card:

                          .slack-card              {              ...              overflow              :              hidden;              ...              }                      

And here is the result 😃

Contour Picture Clipped

I could run into at least two other possibilities for solving this trouble:

• Setting the same border-radius on the .header-with-img
• Removing border-radius from .slack-carte birthday, and dealing with the corner rounding in .header-with-img for 2 top corners and contour-deportment for the 2 bottom ones.

That existence said, I wasn't a fan of the outset alternative because of the redundancy it induces, and I wasn't a fan of the second one considering I wasn't certain how the shadow would carry.

Either mode, if you have arguments for ane or the other of the alternative solutions, or possibly even a 3rd idea, be sure to let me know in the comments or @ThisIsFlorianK on Twitter ;)

Until next fourth dimension — The Professional person Beginner

Source: https://www.professionalbeginner.com/background-image-with-rounded-corners

Posted by: mccordothisforince.blogspot.com

Share this post