Home >Web Front-end >CSS Tutorial >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!