Background size
The background-size property is used to set the size of the background image. The new property of CSS3 is compatible with IE9.
Background-size :10px; background-size:10px;
The parameter value can also be set as a percentage, representing the percentage of the width and height of the box;
For a value to be set equally, write auto;
Contain and cover attribute values
Contain and cover are two special background-size values;
Contain means to change the size of the background image so that it can be contained in the box. The user can see the image completely by zooming-in or losing the image. If the no-repeat is used, the user may see the blank part.
Cover means to intelligently change the size of the background image to fill the box. In short, by enlarging, a picture can fill the whole box without repeat, so that the user cannot see the blank part.
Case presentation
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style>. Box1 {width:600px; height:400px; border:1px solid #000; background-image:url("logo.png"); background-size:600px auto; margin-bottom:20px; } .box2 { width:600px; height:400px; border:1px solid #000; background-image:url("logo.png"); background-size:50% auto; margin-bottom:20px; } .box3 { width:600px; height:400px; border:1px solid #000; background-image:url("logo.png"); background-size:25% auto; margin-bottom:20px; } .box4 { width:600px; height:400px; border:1px solid #000; background-image:url("logo.png"); background-size:contain; background-repeat:no-repeat; margin-bottom:20px; } .box5 { width:600px; height:400px; border:1px solid #000; background-image:url("logo.png"); background-size:cover; background-repeat:no-repeat; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> </html>Copy the code