html{ height: 100%; box-sizing: border-box; } body { height: 100%; margin: 0; padding: 0; } #root{ height: 100%; } .login-wrapper{ width: 100%; height: 100%; background: #f0f0f0; background-image: url(../../background.jpg); } .login-wrapper > * { height: 100%; } .login-wrapper .bg-pic { height: 100%; background-color: #0000FF; } /* .login-wrapper .bg-pic > img { height: 100%; opacity: .6 } */ .login-wrapper .login-container { // background: #f0f0f0; text-align: center; position: relative; background-image: url(/static/media/background.bcd56030.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } .login-wrapper .login-container form{ left: 50%; top: 50%; position: absolute; transform: translate3d(-50%, -50%, 0); padding: 40px; width: 100%; max-width: 400px; } .login-wrapper .login-container p { color: white; } .login-wrapper .login-container .pms-form .ant-form-item:focus-within,.login-wrapper .login-container .pms-form .ant-form-item:hover { background: white; } .login-wrapper .bg-caption { width: 500px; margin-bottom: 20px; padding-left: 20px !important; position: absolute !important; bottom: 0; color: #FFF; } .login-wrapper .logo{ width: 100%; text-align: center; padding: 0; margin: 0 0 40px 0; } .login-wrapper .logo img{ float: none; } .login-form-button{ margin-top: 20px; } .login-wrapper h2{ font-weight: 400 !important; color: #fff !important; font-size: 31px; line-height: 40px; margin: 10px 0; } .login-wrapper small, .login-wrapper .small{ line-height: 18px; font-size: 85%; font-weight: 400; display: block; letter-spacing: .01em; margin: 0 0 10px; font-style: normal; white-space: normal; } @media(max-width:768px) { .login-wrapper .bg-pic { display: none; } } @media only screen and (max-width:549px){ .login-wrapper .login-container { background-image: url(../../background_mobile.jpg); } .login-wrapper .logo img { // float: left; height: 49px; } } @media only screen and (max-width:321px) { .login-wrapper .bg-pic { display: none; } }