Home Web Front-end CSS Tutorial How to implement the adaptive function of background image on computer/mobile phone in css

How to implement the adaptive function of background image on computer/mobile phone in css

Sep 09, 2017 pm 01:05 PM
css cell phone

css code:

@charset "utf-8";

*{
	margin: 0px;
	padding: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}
a{
	text-decoration: none;
}
html{
	width: 100%;
	height: 100%;
	overflow-x:hidden; 
	overflow-y:auto;
}
body{
	width: 100%;
	min-height: 100%;
}
.login-bg{
	 background:url(./bg.png) no-repeat center;
    background-size: cover;
    overflow: hidden;
}
Copy after login

html code:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<body class="login-bg">
//你的内容
</body>
</html>
Copy after login

The above is the detailed content of How to implement the adaptive function of background image on computer/mobile phone in css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Samsung Galaxy S25 Ultra mobile phone leaked: 6.86 inches, horizontal screen-to-body ratio 94.1% Samsung Galaxy S25 Ultra mobile phone leaked: 6.86 inches, horizontal screen-to-body ratio 94.1% Aug 17, 2024 pm 01:49 PM

According to news on August 17, the source @ibinguniverse posted on Weibo today, stating that the exact size of Apple iPhone 16 Pro Max is 6.88 inches, and the exact size of Galaxy S25 Ultra is 6.86 inches. Both can be regarded as 6.9 inches. Sources indicate that the Samsung Galaxy S25 Ultra has a narrower body and a wider screen than the S24 Ultra, with a horizontal screen-to-body ratio of 94.1%, while the S24 Ultra’s horizontal screen-to-body ratio is 91.5%. Fenye checked the relevant Weibo of the source. He also commented on the newly exposed photos of iPhone 16 Pro Max and believed that it was wrong to be close to a micro-curve. The phone is actually a straight screen + 2.5D glass.

'Tandem OLED' has been popularized by Apple. How is it better than OLED? 'Tandem OLED' has been popularized by Apple. How is it better than OLED? Aug 19, 2024 am 04:42 AM

Although Apple has been criticized for its lack of innovation in recent years, Apple has not always stood still. At least in terms of hardware design, with the support of the high unit prices of Apple products, its engineers can easily try some new technologies without having to consider too much cost issues. For example, iPad Pro, as Apple's favorite "display technology" test field, iPad Pro has been at the forefront of display technology for portable smart devices from miniLED in 2021 to tandem OLED in 2024. Although the iPad Pro is not the first portable smart device equipped with a miniLED screen (MSI released a miniLED laptop a year earlier than Apple), when you compare the parameters of the two, you will quickly realize that they are not the same

Hynix is ​​the first to demonstrate UFS 4.1 flash memory: based on V9 TLC NAND particles Hynix is ​​the first to demonstrate UFS 4.1 flash memory: based on V9 TLC NAND particles Aug 09, 2024 pm 03:33 PM

According to news on August 9, at the FMS2024 Summit, SK Hynix demonstrated its latest storage products, including UFS4.1 universal flash memory that has not yet officially released specifications. According to the official website of the JEDEC Solid State Technology Association, the latest UFS specification currently announced is UFS4.0 in August 2022. Its theoretical interface speed is as high as 46.4Gbps. It is expected that UFS4.1 will further improve the transmission rate. 1. Hynix demonstrated 512GB and 1TBUFS4.1 general-purpose flash memory products, based on 321-layer V91TbTLCNAND flash memory. SK Hynix also exhibited 3.2GbpsV92TbQLC and 3.6GbpsV9H1TbTLC particles. Hynix shows off V7-based

Apple and Huawei both wanted to make a buttonless phone, but Xiaomi made it first? Apple and Huawei both wanted to make a buttonless phone, but Xiaomi made it first? Aug 29, 2024 pm 03:33 PM

According to a report from Smartprix, Xiaomi is developing a buttonless mobile phone codenamed "Suzaku". According to this news, this mobile phone codenamed Zhuque will be designed with an integrated concept, use an under-screen camera, and be equipped with Qualcomm Snapdragon 8gen4 processor. If the plan does not change, we are likely to see its arrival in 2025. When I saw this news, I thought I was back in 2019 - at that time, Xiaomi released the Mi MIX Alpha concept phone, and the surround-screen button-less design was quite amazing. This is the first time I have seen the charm of a buttonless mobile phone. If you want a piece of "magic glass", you must first kill the buttons. In "The Biography of Steve Jobs", Jobs once expressed that he hoped that the mobile phone could be like a piece of "magic glass".

The first 1.5K under-screen camera! Nubia Z70 Ultra is here: the world's first Snapdragon 8 Gen4 true full-screen phone The first 1.5K under-screen camera! Nubia Z70 Ultra is here: the world's first Snapdragon 8 Gen4 true full-screen phone Aug 19, 2024 pm 03:47 PM

According to news on August 19, Nubia has been adhering to the true full-screen design since the release of Z50 Ultra, and has been continuously exploring the field of proactive photography under high-pixel screens. Today, digital blogger Wisdom Pikachu broke the news that the Nubia Z70 Ultra, which will be released in the second half of this year, will debut with 1.5K under-screen camera technology, which is the highest-resolution UDC solution in the industry so far. It is reported that ZTE’s under-screen proactive solution has advanced to the sixth generation. The latest under-screen proactive solution is available in the Nubia Z60 Ultra and Red Magic 9S Pro series. The screen resolution is 2480x1116, which is between 1080P and 1.5K resolution. This time Nubia will break through the limitations of existing resolutions and set a new benchmark in the industry.

Use your mobile phone to type 'Black Myth: Wukong '? I can play it in actual testing, but I don't recommend it. Use your mobile phone to type 'Black Myth: Wukong '? I can play it in actual testing, but I don't recommend it. Aug 23, 2024 pm 09:44 PM

Since the launch of "Black Myth: Wukong", its popularity has not dropped, and there are many hot searches every day on all major platforms. Unfortunately, for mobile players, the excitement only belongs to PC players, console players and handheld players. How can that work? We who make mobile phones cannot lose. First of all, we rule out the idea of ​​running Black Monkey on mobile phones. As a large-scale 3A game with a volume of more than 100 GB, the performance requirements are very high, and a large number of rendering technologies are developed for PC hardware. If it is translated and run on mobile phone hardware , let alone how good the frame rate and picture are, you may not be able to enter the game. In this case, we can only look at the popular cloud games. The two giants Tencent and NetEase have launched corresponding activities for "Black Myth". Relying on the advantage that its WeGame platform is also a sales platform, Tencent

Huawei Mate 70 series configuration leaked: All series have 1.5K screens and super large batteries Huawei Mate 70 series configuration leaked: All series have 1.5K screens and super large batteries Aug 08, 2024 pm 10:21 PM

According to news on August 8, the detailed configuration information of Huawei Mate70 series mobile phones has been recently exposed. This series of mobile phones is expected to be released in the fourth quarter of 2024. 1. According to reports, the entire Mate70 series will use customized top-level 1.5K resolution screens to meet users’ requirements for screen clarity. It is expected that Huawei Mate70Pro and the extra-large cup version will be equipped with fourth-depth screens, while the standard Mate70 may adopt a slightly smaller straight-screen design. In addition to screen upgrades, the Huawei Mate70 series will also be equipped with ultra-large-capacity batteries with new base materials, which heralds a breakthrough in the battery life of Huawei Mate series mobile phones. Although Huawei is developing ultrasonic fingerprint unlocking technology, this year’s Mate70 series will not be equipped with this feature. this

Xiaomi Redmi 14C mobile phone revealed to be released on August 31: 6.88-inch 90Hz screen, 5160mAh battery, 50MP main camera Xiaomi Redmi 14C mobile phone revealed to be released on August 31: 6.88-inch 90Hz screen, 5160mAh battery, 50MP main camera Aug 24, 2024 am 11:07 AM

According to news on August 24, technology media 91Mobile published a blog post yesterday (August 23), breaking the news that Xiaomi will release the Redmi14C smartphone on August 31, which will be available in three colors: green (should be plain leather), black and blue. Xiaomi Redmi14C is equipped with an Oreo circular camera module on the back, equipped with 2 camera sensors and 1 LED flash, 50-megapixel main camera, and the volume and power buttons are on the right side. Attached is the promotional picture of Xiaomi Redmi14C as follows. You can see that the front is equipped with a water drop-shaped groove. Since the product is positioned at the mid-to-low end, the frame on the chin part is wider. In terms of specifications, Xiaomi Redmi14C mobile phone is equipped with a 6.88-inch FullHD+ resolution screen with a refresh rate of 90H

See all articles