background-size:cover | contain;

background-size:cover | contain;

原图

不使用background-size

• 第一张背景图片：600 × 431
• 第二张背景图片：426 × 600
• 每个元素的大小：350 × 350

background-size:cover;

背景铺满元素

• 调整背景图片的宽度或高度（较小者），以铺满整个元素
• 保持背景图片的宽高比

background-size:contain;

元素包含整个背景图片

• 调整背景图片的宽度或高度（较大者），使背景图片完全包含在元素中
• 保持背景图片的宽高比

兼容小于IE9的浏览器

AlphaImageLoader 滤镜

• filter: progid:DXImageTransform
  .Microsoft.AlphaImageLoader
  (src='.myBackground.jpg', 
  sizingMethod='scale');

• 不要把IE滤镜应用到html和body上，会导致滚动条和链接出问题
• 不会保持背景图片的宽高比

参考资料

 

• Supersize that Background, Please!
• Background-size
• Perfect Full Page Background Image
• background