CSS form layout for a full screen landing page.

[dorvega]

I’m a newbie in web design, sorry for the maybe stupid question.

I’ve a client that needs a full screen landing page with two layouts (computer, and mobile).
I started to design it but i can’t figure out what will be my my method in this design.
this is the link for now
Any way, this landing page is fixed and working great on 1920×1080 screens because i basically did all the positioning absolute. and the problem is that i can’t figure out how can i achieve the same result on a different screen resolutions and keep form design.
I thought about making the form input fields transparent and the background of all the landing page stretch, some thing like:

body {
    background: url(../images/main-bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%; 
}

And afterwards positioning the text fields and the submit button with JavaScript.
I’m not sure that this is the right way to achieve that design, can someone point me to the right direction?

[Soren]

You could strip it back a bit, lose the overflow: hidden, and position your content wrap (logo, image,form) bottom right on wider screens and on smaller screens let it behave naturally.

http://codepen.io/soren-tree/pen/GaItp

Use a full screen background image technique on the body. Add the image of person smiling to the main background image, maybe. Save yourself another server request.

[Author]

Posts