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
Detailed explanation of nginx proxy_cache cache configuration
Preface: Due to my work, I am involved in the fie...
Detailed explanation of the principle and usage of MySQL stored procedures
This article uses examples to explain the princip...
VirtualBox CentOS7.7.1908 Python3.8 build Scrapy development environment [graphic tutorial]
Table of contents environment Install CentOS Conf...
React introduces antd-mobile+postcss to build mobile terminal
Install antd-mobile Global import npm install ant...
MySQL 5.7.18 installation and configuration method graphic tutorial (CentOS7)
How to install MySQL 5.7.18 on Linux 1. Download ...
MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)
1. Time difference functions (TIMESTAMPDIFF, DATE...
Understanding what Node.js is is so easy
Table of contents Official introduction to Node.j...
Detailed explanation of custom instructions for Vue.js source code analysis
Preface In addition to the default built-in direc...
Instructions for using JSON operation functions in Mysql5.7
Preface JSON is a lightweight data exchange forma...
The basic principles and detailed usage of viewport
1. Overview of viewport Mobile browsers usually r...
The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS
We often need to control the hidden, transparent ...
Detailed explanation of HTML's <input> tag and how to disable it
Definition and Usage The <input> tag is use...
Mysql tree-structured database table design
Table of contents Preface 1. Basic Data 2. Inheri...
JS implements random generation of verification code
This article example shares the specific code of ...
Analysis of the Principle and Function of MySQL Database Master-Slave Replication
Table of contents 1. Database master-slave classi...