Create a rectangle rectangle with a transparent circle using only CSS

Question

I need to implement a project on my web page, but I'm kind of new to CSS.

I am trying to add a frame over a user image. For example, for any image size, I want this profile image to look like this:

... I want to add a rectangle with a transparent circle inside, like:

... so the end result will be like this:

I am currently adding this frame as an image, resizing the user's image, but decreasing the resolution.

I really need the frame height to be equal to the size of the image height and put the frame and circle in accordance with the user's image.

Any ideas?

Answer 1

Well, there are two ways: 1) HTML:

<div class="profile_pic_cont"> <img src="img/profile_pic.jpg" class="profile_pic" /> </div> 

CSS

 .profile_pic_cont { width: 100px; height: 100px; background-color: #d2e8f7; /* light blue */ padding: 5px; } .profile_pic { border-radius: 9999px; } 

or 2) HTML:

 <div class="profile_pic_cont"> <img src="img/profile_pic_frame.png" /> </div> 

CSS

 .profile_pic_cont { width: 100px; height: 100px; background: #fff url('./img/profile_pic.jpg') no-repeat top left; 

}

Answer 2

Here try DEMO . To check the transparency, try changing the body color.

 <div class="outerCont"> <div class="innerCont centerAlign"> <img src="http://i.stack.imgur.com/FjDS6.png"/> </div> </div> 

---

 .outerCont{ height:300px; width:300px; position:relative; overflow:hidden; } .innerCont{ background-color:transparent; border:150px solid rgb(186, 230, 255); border-radius:50%; height:200px; width:200px; overflow:hidden; } .innerCont img{ position:absolute; height:80%; bottom:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); } .centerAlign{ position:absolute; left:50%; top:50%; -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); } 

Answer 3

HERE JSFIDDLE

 .circle { background-color:#fff; border-radius: 50%; width: 250px; height: 250px; text-align:center; background-image:url('http://i.imgur.com/NGz1YlF.png'); background-repeat:no-repeat; background-size:65%; background-position:center bottom; } 

Answer 4

You have to draw a square, then a circle on top of it, and finally place the image, this will give the result you want.
Check there to trace the circle in CSS.