When facebox detects a face, it returns a rectangle object that looks like this:

"rect": {
	"top": 38,
	"left": 527,
	"width": 75,
	"height": 75
}

• top - (int) The distance of the face from the top of the image (Y axis)
• left - (int) The distance of the face from the left of the image (X axis)
• width - (int) How wide the face is (pixels)
• height - (int) How high the face is (pixels)

Rendering the face with CSS

To render the face in CSS, set the original image as the background image of an element like <div>, and apply the following CSS:

element {
	width: {rect.width}px;
	height: {rect.height}px;
	backgroundPosition: -{rect.left}px -{rect.top}px;
}

• The backgroundPosition is essentially moving the background image such that the top/left of the element aligns with the top/left of the rectangle

In jQuery, it might look like this:

$('element').css({
	width: rect.width,
	height: rect.height,
	backgroundPosition: '-'+rect.left+'px -'+rect.top+'px'
})

If you want to overlay the face element onto the original image, make both images position: absolute and add a margin to the face element:

element {
	position: absolute;
	width: {rect.width}px;
	height: {rect.height}px;
	backgroundPosition: -{rect.left}px -{rect.top}px;

	marginTop: {rect.top};
	marginLeft: {rect.left};
}

In jQuery:

$('element').css({
	position: 'absolute',
	width: rect.width,
	height: rect.height,
	backgroundPosition: '-'+rect.left+'px -'+rect.top+'px',

	marginTop: rect.top,
	marginLeft: rect.left
})

This allows you to build an experience where each detected face has its own element which can be distinctly styled like in the example below:

You can see this working for real by accessing the Live demo when you have facebox running locally.