Home > Article > Web Front-end > Detailed explanation of how CSS+html implements background image filling
Today I wanted to write a personal welcome interface, and I messed with the front end, but I was really in a hurry
For the sake of a beautiful view, spend more time, it’s three o’clock in the morning again 0.0
CSS realizes the filling of a single background image
Directly use the background-image attribute of the body element, compatible with multiple browsers, and basically meet the requirements
Add background-color: #22C3AA;Show color before loading image
BUG: There will be a gap at the bottom if the page is too small
Detailed attributes background attribute in w3school
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello world</title>
<style type="text/css">
body {
margin: 0;
background-image: url('bg.jpg');
background-repeat:no-repeat;
background-position:0% 0%;
background-size:cover;
background-color: #22C3AA;
}
</style>
</head>
<body>
</body>
</html> </span>Use p, the picture can adapt to the size of the browser, There will be no body bug
BUG: IE11 is not compatible, there will be a green line (body background color) below, which is very unsightly
See: Making background images adaptive to browser size in HTML
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello world</title>
<style type="text/css">
body {
margin: 0;
background-color: #22C3AA;
}
</style>
</head>
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >
<img src="3-bg.jpg" height="100%" width="100%"/>
</p>
-->
</body>
</html> </span>The above is the detailed content of Detailed explanation of how CSS+html implements background image filling. For more information, please follow other related articles on the PHP Chinese website!