CSS realizes the realization of background image screen adaptation

When making a homepage such as a login page, you often encounter the situation where you need to put a large background image, and the image needs to be scaled proportionally to adapt to the size of different screens.

The html code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/login.css"><!-- My css code path-->

    <title>. . . </title>
</head>

<body>
    <div class="bgimg">
</body>

</html>

The css code is as follows:

.bgimg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    background: url(../img/bg_login.jpg) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}

Analyze the role of CSS code:

position:fixed;
top: 0;
left: 0;

These three sentences fix the entire div at the top and left of the screen

width:100%;
height:100%;
min-width: 1000px;

The first two sentences above make the entire div the same size as the screen, thus achieving a full-screen effect. The purpose of min-width is to ensure that when the screen width is within 1000px, the size of the div remains unchanged, that is, the image does not scale.

z-index:-10;

The purpose of this is to make the entire div below each level in the HTML page. Under normal circumstances, the z-index value of the default created level is 0, so if we write -1 here, it can also be achieved. However, writing -10 here ensures that the entire div is at the bottom. Because if there are too many levels in the page, sometimes using -1 does not necessarily mean it is at the bottom, but if you write a large number like -100, it doesn’t make any sense. Use -10 to make it look like a background image. In fact, it is a most ordinary div, but the hierarchical relationship has changed, which makes it look like a background image.

zoom: 1;

Zoom is the part of the CSS hack that works specifically for IE6. IE6 browser will execute zoom:1 to indicate the zoom ratio of the object. Compatible with IE6, IE7, IE8 browsers, often encounter some problems, you can use zoom:1 to solve, zoom has the following functions: 1. Trigger IE browser haslayout; 2. Solve some problems such as floating and margin overlapping under IE.

background-repeat: no-repeat;

The pictures are tiled and not repeated

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

The above three sentences mean the same thing, which is to let the image scale synchronously with the screen size, but some parts may be cropped, but they will not be exposed. The following two sentences are for compatibility with Chrome and Opera browsers.

background-position: center 0;

The above sentence means the position of the picture, centered and aligned to the left

The effect is as follows:

When it is larger than 1000px: (the screenshot is too large, I reduced the image a bit)

When less than 1000px:

Original image: (This one is too big, so I reduced it a bit)

This is the end of this article about how to implement background image screen adaptation with CSS. For more relevant CSS background screen adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: JavaScript microtasks and macrotasks explained

>>: A brief discussion on group by in MySQL

Summary of several error logs about MySQL MHA setup and switching

Blog

Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need

Blog

Deleting two images with the same id in docker

CSS realizes the realization of background image screen adaptation

Summary of several error logs about MySQL MHA setup and switching

Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need

Deleting two images with the same id in docker

js implements random roll call

MySQL 8.0.16 installation and configuration tutorial under Windows 10

CentOS6.8 Chinese/English environment switching tutorial diagram

MySQL database green version installation tutorial to solve system error 1067

In-depth analysis of the role of HTML  comment tags

DHTML objects (common properties of various HTML objects)

Summary of HTML knowledge points for the front end (recommended)

Recommend

HTML Tutorial: Collection of commonly used HTML tags (4)

Introduction to HTML page source code layout_Powernode Java Academy

Detailed explanation of MYSQL database table structure optimization method

Springboot+VUE to realize login and registration

JDBC-idea import mysql to connect java jar package (mac)

Summary of the differences between global objects in nodejs and browsers

Front-end performance optimization - the pain points that front-end engineers have to talk about

MySQL installation and configuration tutorial for win10 free installation version

Native JavaScript to achieve the effect of carousel

Detailed explanation of moment.js time and date processing

Detailed process of installing and deploying onlyoffice in docker

MySql 5.7.20 installation and configuration of data and my.ini files

JS implements request dispatcher

Steps to use ORM to add data in MySQL

How to limit the input box to only input pure numbers in HTML