Overlay form elements <fieldset> on to an image; where the full image is shown and scales with device-width

Question

I want to overlay a form with fields on to an image. Essentially I have created a picture that resembles and artist's desk. I have uploaded the image here:

_{(source: saeedalkhirbash.com)}

I want the "Personal Details" section to be on top of one part of the image (post-its on a desk) and the remaining "Information section" on top of the graph paper on the desk. I have all the fonts etc already.

I have tried two methods:

method1: Coding my image as a background-image. This is easy to get form elements on top. The problem is that I cannot work out how to make the image do both of the following:

• retain its proportions, with the width equal to the device width (and height scaled to retain the image's proportions);
• and always show the full height and width.

I have tried adjusting the background size in %s, auto, and using cover, contain - no combination seems to work.

method2: I can make my image fit nicely with very simple code:

<img src="*.png" style="width:device-width">

and this works great. Unfortunately I cannot work out how to overlay the form elements. I have tried using z-index:1 as below, but this achieves nothing... (I have tried for both the form and fieldset attributes.

<form style="z-index:1"><fieldset> input blah blah </fieldset><form>

How can i do this ?

Answer 1

using a background image will be the easiest way to go. I think you will have issues with scale when viewing on a mobile device depending on how many fields you are planning on using and where.

By setting the form position to relative, and then any fieldsets to absolute, will allow you to posistion them accurately.

Your css for the background, so that it scales correctly, would look something like:

background: url('http://www.saeedalkhirbash.com/backgroundfinally.png') top left / 100% 100% no-repeat;

By setting the width of your form to be relative to its container, it will resize as the screen size changes. Using media queries is an easy way to resize based on device/screen width.

@media only screen and (max-width : 480px) {
div{width:300px;height:300px;}
}

Here is an example code pen for you - http://codepen.io/lukeocom/pen/bfeGC/ Resize the window so that it is less than 480px wide and see what happens... For a version of the above demo that uses a relative width - http://codepen.io/lukeocom/pen/jBxzI/

Hope this helps