Introduction:

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

Implementation method one:

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(&#39;bg.jpg&#39;);  
	background-repeat:no-repeat;
        background-position:0% 0%;
  	background-size:cover;
	background-color: #22C3AA;
}
</style>

</head>    
<body>
</body>    
</html> </span>

Copy after login

Implementation method two:

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>

Copy after login

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!