Rectangular image in circle with see-through background

Question

I have to implement a popup window like this:

It can appear anywhere on the screen. I need to put a 50x50 rectangular Facebook profile picture inside a circle with a thick white border. So I need to trim the profile image while keeping the background showing through. The problem is that the background is an image itself, so a mask image with a solid color outside the circle wouldn't work.

Is this possible somehow with HTML/CSS/jQuery?

Answer 1

I'd just use border-radius to create the circle, in combination with overflow:hidden to make it crop the image. Here's an example: http://jsfiddle.net/6LHNy/

The markup:

<div class="wrapper">
    <img src="http://www.petscarecenter.com/wp-content/uploads/2011/05/dog.jpg" />
</div>

​The relevant CSS:

.wrapper {height:100px; width:100px; border-radius:100px; border:4px solid white; overflow:hidden}​

Answer 2

Sure, put the image as a background (with css) and use border-radius to round the corners of the containing element.

Something like this:

<div style="border: 3px solid white; border-radius: 25px;
height: 50px; width: 50px;
background: #aaa url(facebook-head.png)"></div>

Note: IE 8 and below won't round the corners: http://caniuse.com/#search=border-radius