Resizing Problem

I created a login form, but it’s not positioned in the correct background location when I reduce the browser’s size, in other words when maximized become perfectly, but when I reduce the browser’s size only the background resize and the form not, not getting on top of the drawing area that had to stay.

How I resize the background together the login form?

Image:

 

Without seeing the code you are using, we can't help you.

 

The solution was resize the background's size to 2272 x 1704 (4 mp), load the background image in css and delete the code line background-size:cover. This way, there won't be resolution problem.

Thank you for your time.

 

No, just a bandwidth and system memory problem since that size is non-viable for web deployment.

 

It’s true, but was the only way I found to solve this problem. My mistake was put a draw in background instead to make it all in css. Maybe the best solution would be transform this background image in css, but it’s hard to do it.

If anyone knows how I do it or have other solution, I would be very grateful.

body, html{
    background-image: url(layout.png);
    background-repeat: no-repeat;
    background-size:cover;
}

#login, form{
    width: 180px;
    float:left;
    margin: 117px;
    
}

.login_legend{
    font-family:vijaya;
    font-size:30px;
    padding-bottom: 10px;
}
        
label,  input {
    display: block;
    float: left;
}

input[type=email]{
    -moz-box-shadow: 2px 2px 4px #cccccc;
    -webkit-box-shadow: 2px 2px 4px #cccccc;
    box-shadow: 2px 2px 4px #cccccc;
}

input[type=password]{
    -moz-box-shadow: 2px 2px 4px #cccccc;
    -webkit-box-shadow: 2px 2px 4px #cccccc;
    box-shadow: 2px 2px 4px #cccccc;
}

input[type=submit] {
  border-top: 1px solid #0c80c9;
   background: #041b2b;
   background: -webkit-gradient(linear, left top, left bottom, from(#08298c), to(#041b2b));
   background: -webkit-linear-gradient(top, #08298c, #041b2b);
   background: -moz-linear-gradient(top, #08298c, #041b2b);
   background: -ms-linear-gradient(top, #08298c, #041b2b);
   background: -o-linear-gradient(top, #08298c, #041b2b);
   padding: 1px 8px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 15px;
   font-family: vijaya;
   text-decoration: none;
   vertical-align: middle;
   border:0;
   }

input[type=submit]:active{
    -moz-box-shadow: 2px 2px 4px #cccccc;
    -webkit-box-shadow: 2px 2px 4px #cccccc;
    box-shadow: 2px 2px 4px #cccccc;
    border-top-color: #000040;
    background: #000040;
    color: #ffffff;
}

label {    
    text-align: right;
    font-family:vijaya;
    font-size:20px;
    width: 35px;
    padding-top:10px;
    padding-right: 12px;
    padding-bottom: 0px;
}

.logar{
    padding-top:10px;
}

br {
    clear: left;
}

Code (markup):

Site Image Update: