在图像中创建一个空间，使用php、jquery在其上放置另一个图像

我想创建一个网页，其中有一个背景图像，并在那里，有一个图像的地方持有人，在那里，用户可以点击并上传照片，照片将被放置在该背景图像（与用户上传的图像可以调整大小的放大）

所以我的问题是：

如何创建空白区域（例如背景图像上方的圆圈），我已使用以下方法在页面上创建了背景图像：

<div style="background-image: url(bg.jpg); height: 400px; width: 800px; border: 1px solid black;">

我想在上面创建的空间中有一个链接，它会打开一个弹出窗口，让用户上传图像，并且该图像将在创建的空间中可见（圆圈）

我知道如何使用jquery打开模态表单，并使用php上传图像。 请指导我创建图像的占位符，然后在上传后如何将该图像放置在占位符中

我不擅长jquery和HTML。因此，感谢您对他的帮助。

CSS: HTML: 截图：

小提琴：

* {font-family: "Segoe UI", Tahoma;}
p {margin: 0 0 15px;}
.frame {background: url("http://www.vector-eps.com/wp-content/gallery/floral-frames-vectors/floral-frames-vectors4.jpg") center center no-repeat; width: 400px; height: 314px; position: relative;}
.frame img {position: absolute; width: 150px; height: 100px; top: 100px; left: 125px; border: 1px solid #ccc;}​

<p>Say you have something like this:</p>

<div class="frame">
    <img src="http://i48.tinypic.com/dmb47t.jpg" />
</div>​

$(".frame > img").attr("src", "image-url");