About setting up Web page Adaptive different browser problem solving

In the production of a login interface encountered such a problem, the background picture is a large picture, login content Designer design is relatively large, when I cut out the graph, found that because my browser screen is relatively small, the background picture has a scroll bar, the login content in the small screen appears unusually large, So we need to solve two questions: 1 How to make the background picture full of the entire screen, and as the browser screen of the different adaptive 2 How to keep the login content is always centered, so that the login content to the top of the screen adaptive distance.

Workaround: Issue 1 Separate the background picture, but use it as a foreground picture and set

. beijing {position:fixed;width:100%;top:0;left:0;}

Then set the login content to

position:relative;

Question 2 using JS to dynamically determine the height of the browser, set the current Margin-top

$ (function () {           var zishiying = function (obj) {var Winh = $ (window). Height ();        var winw = $ (window). width ();        var winquotient = Winw/winh;        var Szy_dl_totalh = $ (". Szy_dl_total"). Height ();        $ (". Szy_dl_total"). CSS ({        "margin-top": (WINH-SZY_DL_TOTALH)/2        });                    }        $ (window). Resize (function () {zishiying ($ (". szy_dl_beijing img");        });        Zishiying ($ (". szy_dl_beijing img"));})

　　

　

　　　　　　

About setting up Web page Adaptive different browser problem solving