Question

I am currently developing a page with a very large and focal background image which can move and will change depending on window size.

On top of this image I have a div with a solid colour and content.

Is it theoretically possible to set another div inside of this div and use it almost like a window to cut out the initial div to view the image underneath.

I would be happy if this utilised something that was only available in modern browsers.

If not I will have to cut up the initial div into 4 or so smaller divs and place them almost like a frame around the area I want to be able to look through, but I would like to try and achieve this as semantically as possible.

Any pointers in the right direction greatly received!

What I have looked at

I could be going down the wrong path here, but I am looking into how to mimic a type of screen capture, something like -> http://html2canvas.hertzen.com/

I am thinking if I can manipulate this to take the picture only for the co-ordinates of the corners of the div and make it ignore the block colour div on top of it, I should be able to get the details and show them in a canvas element.

Then I would just need to make it update on drag,scroll and resize events.

edit for clarification

The content on the main div (with a solid background colour) has text and form elements that need to be clickable and useable.

Answer 1

A simple solution would be to use a background image for your container div. The background image would be a PNG with a transparent square in the center. Please note that this would only work if your container div has a fixed width and height.