Add a background image to a certain element of the page. When the specific width and height are not specified, the effect cannot be displayed.
1. Add a background image
HTML code:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; height:auto; background:url('images/page.jpg') no-repeat center center; background-size:cover; } </style> </head> <body> <div id="wrap"> </div> </body> </html>
We can take a look at the screenshot of the page effect:
#In order to adapt to the screen size of different terminals, we cannot write the width and height to death, so what should we do? You can take the following methods:
HTML code:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} #wrap{ width:100%; height:100%; background:url('images/page-small.jpg') no-repeat; background-size:cover; position:fixed; z-index:-10; background-position:0 0; } </style> </head> <body> <div id="wrap"> </div> </body> </html>
Let’s take a look at the page effect:
Mobile page effect
Note: If you remove the div and add the style directly to the body, it can be displayed on PC browsers and Android phones, but it cannot be displayed on Apple phones. After many repeated tests, this bug is reproduced (if any friends encounter the correct solution to this kind of problem, please give us advice!)
(The picture above is for an Apple model. Screenshot)
2. Add a background image through the img tag
HTML code:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} </style> </head> <body> <div id="wrap"> <img class="imgBcground" src="images/page-small.jpg" alt=""> </div> </body> </html>
When checking the page effect, I found that the image is presented at 100% actual size, which is obviously not the case. The effect we want
is very similar to the above example, we just need to modify it slightly
HTML code:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/> <title></title> <style> *{margin:0; padding:0;} .imgBcground{ display:block; width:100%; height:100%; position:fixed; z-index:-10; } </style> </head> <body> <div id="wrap"> <img class="imgBcground" src="images/page-small.jpg" alt=""> </div> </body> </html>
The page effect can be viewed under different simulation models:
Regarding the background-size attribute, W3C defines it like this
The above is the detailed content of How to add a background image to an element of unknown width and height using css. For more information, please follow other related articles on the PHP Chinese website!