Home >Web Front-end >HTML Tutorial >background-size sets the size of the background image_html/css_WEB-ITnose
background-size sets the size of the background image_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:041428browse
background-size
Set the size of the background image, displayed as length value or percentage, also Images can be retracted using cover and contain.
Syntax:
background-size: auto | <长度值> | <百分比> | cover | contain
Value description:
1. auto: Default value, does not change the original height and width of the background image;
2. f1f03c27da7e3f194d4a72b070f3e741: appear in pairs such as 200px 50px. Set the width and height of the background image to the first two values in sequence. When setting a value, use it as The image width value is proportionally scaled ; Set in turn to the value obtained by multiplying the width and height of the element by the previous percentage. When setting a value, the same as above;
4. cover: As the name suggests,
covers, that is, The background image is scaled to to fill the entire container; 5. contain: Contain, that is, the background image is scaled to
one side close to the container To the edge. Tips: You can enter your own code in the editing window on the right to try out the effects of different values.
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景图片大小</title><style type="text/css">.demo { background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size:cover;}</style> </head> <body><div class="demo"></div></body></html>