Build a rectangle frame with a transparent circle

Question

I need to implement a design to my webpage butI am kind of newbie with CSS.

What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:

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

... so the final result would be like:

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

I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.

Any Ideas?

Answer 1

HERE IS THE 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 2

Well, there are 2 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 3

You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.

Answer 4

Here try this DEMO. To check transparency, try changing 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%);
}