How to set the background image size in css

You can use the background-size attribute in css to set the size of the background image. The syntax is "background-size: value | percentage | cover | contain;"; where cover represents the proportional expansion of the image to fill the element, and contain represents Scale down the image proportionally to fit the element's dimensions.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 Set the size of the background image

     
  
 Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 
 
原始图片: 
  

##css3 background-size attribute## The #background-size attribute specifies the size of the background image; it can be used on Firefox, Chrome, and IE9.

The specific usage is as follows:

Background image size (numeric representation):

• #background-size{ background-size:200px 100px; }

Background image size (percentage representation):

• #background-size2{ background-size:30% 60%; }

Background image size (expand the image proportionally to fill the element, that is, cover value):

• #background-size3{ background-size:cover; }

Background image size (reducing the image proportionally to adapt to the size of the element, that is, the contain value):

• #background-size4{ background-size:contain; }

Background image size (fill the element with the size of the image itself, that is, auto value):

• ##

  #background-size5{ background-size:auto; }

  (Learning video sharing:
css video tutorial

The above is the detailed content of How to set the background image size in css. For more information, please follow other related articles on the PHP Chinese website!