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
Recommend
The perfect solution to the error of installing Mysql Applying Security in windows server2014
The reason is that it was not uninstalled cleanly...
MySQL export of entire or single table data
Export a single table mysqldump -u user -p dbname...
The specific implementation of div not automatically wrapping and forcing not wrapping in html
1. Use the <nobr> tag to achieve no line bre...
A detailed discussion on detail analysis in web design
In design work, I often hear designers participati...
Rsync+crontab regular synchronization backup under centos7
Recently, I want to regularly back up important i...
MySQL 8.0.14 installation and configuration method graphic tutorial
This article records the installation and configu...
Summary of common commands in Dockerfile
Syntax composition: 1 Annotation information 2 Co...
Comprehensive analysis of MySql master-slave replication mechanism
Table of contents Master-slave replication mechan...
IE8 browser will be fully compatible with Web page standards
<br />According to foreign media reports, in...
Linux Samba server super detailed installation and configuration (with problem solving)
Table of contents Introduction to Samba Server Sa...
Linux implements automatic and scheduled backup of MySQL database every day
Overview Backup is the basis of disaster recovery...
Summary of problems encountered when installing docker on win10 home version
Docker download address: http://get.daocloud.io/#...
Detailed explanation of Docker cross-host container communication overlay implementation process
There are also two servers: Preparation: Set the ...
Designing the experience: What’s on the button
<br />Recently, UCDChina wrote a series of a...
Detailed explanation of asynchronous iterators in nodejs
Table of contents Preface What are asynchronous i...