Tricky CSS positioning of Image + HTML Form

[TechBlitZ]

I have a HTML Form, and I have an Image..

 

I would like the form to sit on top of the image, so that the image is much larger and behind the form.

 

 

So far I have the image in the perfect position using the following

 

   .image { 

   position: relative; 

   width: 100%; 

}

 

I have the form and have styled it in CSS, it currently sits directly underneath my picture but I would like it to be splat bang in the centre of the image.

Any ideas how I can do this?

 

Thanks guys

 

 

[Nineshadow]

I don't quite understand what you are trying to achieve.

How does the form sit directly underneath your picture? It looks like it's on top of it ( I'm talking about the z-index ).

Do you just want to center the form?

@TechBlitZ follow your threads/topics.

[TechBlitZ]

Thanks for the reply Nineshadow.

 

I mean currently the image sits under the form on the Y axis when viewed in my browser.

Attached is just a picture I mocked up in Photoshop.

 

I am looking to recreate what you see in that photoshop image, but in html/css

[givingtnt]

Thanks for the reply Nineshadow.

 

I mean currently the image sits under the form on the Y axis when viewed in my browser.

Attached is just a picture I mocked up in Photoshop.

 

I am looking to recreate what you see in that photoshop image, but in html/css

can you send a picture of your design ? (as it is right now)

 

also. have you tried : background-image

 

as I see it you would have the background image with your actual image. then a div with the form in it (then set the background of the div in the css to be transparent)

[TechBlitZ]

Thanks for the reply givingtnt,

 

Here's a pic of how it currently looks

 

Using the following html and css - https://jsfiddle.net/u655rvdb/

 

Thanks for the rapid replys, this is probably really simple

[PrimeSonic]

You could try fiddling with Position: Absolute along with x: ?px, y: ?px, and z-index : ? to put the form exactly on the page.

That could get ugly though.

 

You might want instead a Float: Left to the image container and a Margin-Left : -?px on the form container.

This method will make the form be rendered next to the image container, rather than underneath it. And then with a negative left margin, which should be the same width as the form, it will be pulled over it.

 

It's been months since I've touched CSS layouts so this probably seems like a bit of a hack.

Granted, all CSS feels like a hack to me now.

 

Play around with those properties and you should be able to tweak things until the layout is right where you want it.

 

If all else fails, just put the form container inside the image container, and rather than rendering the image as its own element, you could attempt to set the background-image: src property on it so the outer container uses it as a background in the same way you would fill a div with a background-color.

 

Sometimes, the only way to learn CSS is trial and error. So keep at it.

[Willson94]

@TechBlitZ Give the following CSS edits a go.

.bootstrap-frm {                        margin-left: 5%;            margin-right: auto;            max-width: 500px;            background: #FFF;            padding: 20px 30px 20px 30px;            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;            color: #888;            text-shadow: 1px 1px 1px #FFF;            border: 1px solid #DDD;            border-radius: 5px;            -webkit-border-radius: 5px;            -moz-border-radius: 5px;        }.image {                position: absolute;            top: 0px;                left: 0px;            z-index: -1;        }