Question

I have to implement a popup window like this:

It can appear anywhere on the screen. I need to put a 50×50 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}​