Html always shows the elements in the center. The background image is full and drag randomly without going out of the border. The background image is full.

Html always shows the elements in the center. The background image is full and drag randomly without going out of the border. The background image is full.

First, write two class attributes.

Body {margin: 0; padding: 0; height: 100%; width: 100%; background-image: url (.. /Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover ;}

. Login {height: 300px; width: 400px; border: 1px solid # f00; position: absolute; left: 50%; top: 50%; margin:-150px 0 0 0-200px ;}

The background image is set in the above body. The percentage of length and width is 100%. The background image is not repeated and the size is to overwrite the entire browser.

The login style is the logon box, and the height and width are fixed. Then, the border is used to locate and display the logs conveniently. You can cancel the login style after positioning the logs.

The position is an absolute attribute, and the width is 50% to the left and 50% to the top.

If the magin attribute is used,-150px is used to move the logon box up to 150px, so the logon box has 150px in the browser center and 150px in the browser center.

The same is true for-200px.

No matter how you narrow down the browser window, there will be no blank area in the background image, and the window is still in the browser center.

Even if the display resolution is changed, the window is still in the center of the browser.