CSS3实现背景图片拉伸铺满整个页面

By | 2014/06/11

在CSS3中可以使用background-size设置背景图片的大小。

语法:
background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain

 

background-size:cover

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

background-size:contain

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

 

如上所述,只要将background-size设为cover,则可以将背景图片铺满整个页面。

body{
  background: #1e90ff url(/static/dashboard/img/bg-splash.jpg) center center no-repeat fixed;
  background-size: cover;
}

Leave a Reply

Your email address will not be published. Required fields are marked *