Positioning within a HTML form

Question

I realize this is a very basic issue.

I am currently trying to create a website http://theviewbeyond.co.uk/ .

I am currently adding a contact form to which I have created a picture to use as the background of the form, the issue is I cannot move the objects within the form such as text boxes to within the picture.

I have tried absolute positioning which doesn't seem to work either.

How can I do this ?

form {
margin: 0 auto;
width: 60%;
background-image: url("../IMG/contactpage1[2742].jpg"); 
background-size: cover;

Answer 1

将图片设置为您的背景：

<div id="container" style='background-image:url("IMG/slidermockup[2710].jpg");'></div>

Answer 2

I was reviewing your site and see your problem, I was trying some styles and I realice that background-image doesn't fit correctly if your container has a different size of your image so you need to play with the height and width of your form.

margin: 0 auto;
background-image: url(../IMG/contactpage1[2742].jpg);
background-position: center center;
background-size: cover;
height: 350px;
width: 370px;

In different screen sizes you'll need to use media queries to make it work well.

Answer 3

I've used a fieldset as a supplimental container and positioned your from elements in this using padding . Change the padding values asrequired

 fieldset { border: 0; padding-top: 400px; padding-left: 175px; } form { margin: 0 auto; width: 60%; background-image: url("http://theviewbeyond.co.uk/IMG/contactpage1[2742].jpg"); background-size: cover; height: 900px; }

 <div id="Contact"> <form> <fieldset> <input type="text" id="name" placeholder="NAME"> <input type="text" id="email" placeholder="EMAIL"> <input type="number" id="number" placeholder="PHONE"> <input type="text" id="Event" placeholder="Type Of Event"> <textarea name="message" placeholder="MESSAGE"></textarea> </fieldset> </form> </div>

Arnolds answer also has valid point regarding image size and media queries