Why my background is not covering all page and why my login box is not in the middle?

Question

Position:absolute;
Right:50%;
Left:50%;
Top 50%;

And the box is not in middle

And background also is position:covered
https://code.sololearn.com/WXxDEAuV7joS/?ref=app

Answer 1

Add this

#login-box {

position:absolute;
top:20%;
left:30%;
right:20%;

Answer 2

It works good 👍

Answer 3

easier to just set html, body { hieght: 100%}

Answer 4

#login-box {

position:absolute;
top: 30%;
left: 30%;

}

keep in mind i did it on my phone and you need to code for responsiveness for it ti work on diffeent devices

Answer 5

I went with this so it adds a legend to your login box. You just need to play around and center it. <fieldset id="login-box">
<legend><h3>Login</h3></legend>
!<-- your html -->
</fieldset>

Answer 6

automatic centering could be achieve thanks to combination of absolute positioning and translate transform:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Answer 7

Use transform: translate (-50%, -50%);

Really works

Answer 8

#login-box {

margin:auto;
padding-top:50%;
width:50%;
}

Answer 9

This don't help it become even smaller with ba kground size

Answer 10

Thanx but the login box ain't in middle with position static the login box is in middle with some random 30 35% numbers not with 50 in exactly middle

Answer 11

as well as background

Answer 12

Doesn't work

Answer 13

body, html {
height:100%;
width:100%; background-image:url("https://image.freepik.com/free-photo/great-view-park-with-city-background_1203-651.jpg");
background-repeat:no-repeat ;
font-family:sans-serif;
background-size: cover;
}

Answer 14

that works

Answer 15

You just added , html to the body {} ?

Answer 16

then rotate lol thats why there is a comma and plus the order doesnt matter

Answer 17

the comma seperates them

Answer 18

background-size cover; as well

Answer 19

But why the login box is not in the midle?
https://code.sololearn.com/WXxDEAuV7joS/?ref=app

Answer 20

Ah well how can i make the picture look better on page?