Question

I want to create a webpage where a background image is there and on that, there’s a place holder for an image, where a user can click and upload a photo and that photo will be placed on that background image(with the user uploaded image can be resize of zoom in).

So my question is:

1. How do I create a blank space say a circle on top of an background image, I have created background image on page using this:

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

2. I want in that space created above to have a link sort of which will open a pop up to let user upload an image and that image will be visible in the space created(circle).

I know how to open modal form using jquery, and upload image using php.
Please guide me in creating the place holder for image and in turn how can i place that image in the place holder after upload.

I am not good at jquery and HTML. So appreciate your help int his regard.

Answer 1

CSS:

* {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;}​

HTML:

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

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

jQuery

At first there will be an empty <img /> tag. With jQuery, after the upload, you can set the value this way:

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

Screenshot:

Fiddle: http://jsfiddle.net/UUtyQ/