html{height: 100%;} body.signin { background: #18c8f6; height: auto; background:url("../img/login_bg.jpg") no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .login-info{ position: relative; } .login-info img{ width: 250px; position: absolute; top: -160px; left: -100px; } .login-info p{ font-size: 28px; } .login-info p:last-of-type{ font-size: 48px; font-weight: bold; } .signinpanel { color: white; width: 1250px; display: flex; margin: 0 auto; justify-content: space-between; align-items: center; position: fixed; transform: translate(-50%,-50%); top: 50%; left: 50%; } .fixed-logo{ position: fixed; top: 50px; left: 50px; } .fixed-logo img{ width: 60px; } .signinpanel .logopanel { float: none; width: auto; padding: 0; background: none; } .signinpanel .signin-info ul { list-style: none; padding: 0; margin: 20px 0; } .signinpanel .form-control { display: block; margin-top: 15px; } .signinpanel .uname { background: #fff url(../img/user.png) no-repeat 95% center;color:#333; } .signinpanel .pword { background: #fff url(../img/locked.png) no-repeat 95% center;color:#333; } .signinpanel .btn { margin-top: 15px; } .signinpanel form { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255,255,255,.3); -moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03); -webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03); box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 30px; } .ivu-btn-primary{ border-color:#1FE4DC!important; background-color: #1FE4DC!important; color: #000000; } .signup-footer{border-top: solid 1px rgba(255,255,255,.3);margin:20px 0;padding-top: 15px;} @media screen and (max-width: 768px) { .signinpanel, .signuppanel { margin: 0 auto; width: 420px!important; padding: 20px; } .signinpanel form { margin-top: 20px; } .signup-footer { margin-bottom: 10px; } .signuppanel .form-control { margin-bottom: 10px; } .signup-footer .pull-left, .signup-footer .pull-right { float: none !important; text-align: center; } .signinpanel .signin-info ul { display: none; } } @media screen and (max-width: 320px) { .signinpanel, .signuppanel { margin:0 20px; width:auto; } }