full screen login

Question

I'm working on a login screen, and I need to get it working full screen.

I'm trying to place forms on top of the username and pas only I'm not getting the position right

here is an example: http://jsfiddle.net/TSbRY/

   #loginbackground{
        width:100%;
        height:100%;
        position:fixed;
        top:0px;
        left:0px;
        background: url(http://ivojonkers.com/loginscreentemp.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

    #loginbackground form{
        width:18.667%;
        height:7.466%;
        position:absolute;
        top:51.4%;
        left:50%;
        margin-left:-8.867%;
 }

    #loginbackground input{
        width:100%;
        height:31.25%;
        background-color:#F00;
        border:none;
        font:Georgia, "Times New Roman", Times, serif;
        font-size:18px;
        position: absolute;
 }

​

My problem is that I want to place the forms on the username and pas and be there at every screen resolution, so when you're scaling your browser you need to get the forms on top of the part where you think can type in the img.

ash you can see in the full screen overhere http://fiddle.jshell.net/TSbRY/show/ it will fit on some screen resolutions but not on all

Answer 1

Well, there is a way you can solve this easily. Either you do what Bastian Rang said in his answer or you can go ahead and break up that image into two pictures. So, the login information will be a separate image. In that way, you can center and resize that through css or javascript. And set that login panel to position relative and you can easily place inputs inside and move it around easily. I can explain more if necessary. The problem you are facing occurs because the image you have combines the input region and the background. Split them up and it will be so much easier.

Merry Christmas and a Happy New Year! In the spirit of giving, here you go: [UPDATED] Design of OP's login. You need to see it in Google Chrome and use the latest version of it. Only tested on Google Chrome.

<div style = "height:100%;width:100%;position:relative;top:0;right:0;left:0;bottom:0;
position:fixed;">
<div style = "background:red;height:55%;top:0;left:0;right:0;position:absolute;background: -webkit-linear-gradient(top, #3BBCFE, #64D5FF,#06ADFE);"></div>
<div style = "background:blue;height:45%;top:55%;left:0;right:0;position:absolute;background: -webkit-linear-gradient(top, #59D2FF,#41C1FE);"></div>
<div style = "background:green;height:20%;width:40%;background: -webkit-linear-gradient(top, #01C5FF,#076799);border-radius:4px;
              box-shadow:0 0 120px 0 rgba(0,0,0,0.5), inset 0 2px 1px 0 rgba(255,255,255,0.5), 0 1px 3px 0 rgba(0,0,0,0.4);position:absolute;left:30%;right:0;top:40%;
              border:1px solid rgba(0,0,0,0.2);border-top:none;border-bottom:1px solid rgba(0,0,0,0.7);">
                  <input type = "text" style = "position:absolute;left:5%;top:18%;right:5%;width:90%;height:25%;border:none;background:#00A2ED;box-shadow:inset 0 1px 8px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5),inset 0 1px 2px 0 rgba(0,0,0,0.1);border-radius:4px;"/>
                  <input type = "text" style = "position:absolute;left:5%;top:53%;right:5%;height:25%;width:90%;border:none;background:#00A2ED;box-shadow:inset 0 1px 8px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5),inset 0 1px 2px 0 rgba(0,0,0,0.1);border-radius:4px;"/>
</div>

You can see how I used position:absolute and position:relative with % for height, width, top, bottom, left, and right to create the effect.

Please don't just copy it. Try to understand how this works, it will serve you better in the long run.

[UPDATED!] Design of OP's login.

UPDATED: I am not sure if you are expecting us to make the images for you and provide the code for you. But if you are, I would like to say that the community will not write the code for you but will guide you in the right path. What you need to do know is choose the smarter path. A statement such as "I need to support all browsers" is rather immature. Start by choosing your audience by studying the modern browser trends and which browsers are used the most. Start by choosing the best browsers to start developing for. There are over 160 browsers out there and it is challenging or nearly impossible to develop complicated detailed layouts like yours (i.e. box-shadows). So, there are basically two options pure css or using images and css. Pure CSS can be adjusted easily while images become quite static and take time to create (if you are not well versed with graphics) and/or edit. Images will have to be made in something like Photoshop, Fireworks, GIMP, or Pixlr.com to create the images and then scale them as necessary by the browser (using css) - again this is not perfect for all browsers. And I will close by saying that the community will not make the images for you - that will be your job.

Disclaimer: Simple html will be rendered quite equally across different browsers, but more complex ones involving box-shadows and gradients will not.

I have made a small diagram representing the cutouts which can be done to achieve the perfection and cross-browser compatibility you are looking for. But this is quite challenging. Download to the image to see the notes/markings in full resolution.

Look into 9-patch images: basically, use that concept when you decide to break these images up.

Answer 2

You can't.

That is an image.

With a pixel width / height, you will have a fixed image, and then no full screen;

With a percent width / height, you will have image stretching / rescaling, and you will have no clue on where or how to reposition your form fields.

What you CAN do is to

1) render the image with CSS only, because it is a simple image, and you can achieve that with CSS3 Gradients, Border-radius and Box-shadow properties;

or

2) use a fixed image, set margin: 0 auto to set it always at center. Then, put a background-color around to fill the rest of the screen.

or

3) Split the image in two images: you resize the background image (the gradients), while you set fixed widths / heights only for the login box, leaving it always centered.