css背景图片大小如何设置

1、熟悉CSS（Cascading Style Sheets）即层叠样式表的朋友们都了解CSS，尤其是现在最新的版本CSS3是多么的简便，可以用简单的语言实现复杂的效果。尤其是在现在HTML5流行的时刻，CSS3实现了很多的动画效果。我们在使用CSS语言来创作我们的“作品”的时候，特别是对于HTML5小白来说，会遇到这么一个问题：CSS背景图像的大小应该怎么设置呢？纯色？or 图像？这是一个需要解决的问题！

2、（一）介绍一下背景色我们可以使用background-color 属性为元素设置背景色。如：p {background-color: ###;} ###为你要设置的背景颜色，如white-白色,gray-灰色等。但在这里我们主要讨论应用背景图像的问题。

3、要把图像应用成为背景，要使用background-image这一 属性。当background-image 属性默认值是 none的时候，这表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值，如：body {background-image: url(/i/eg_bg_01.jpg);}

4、那么，怎样设置背景图像的大小呢？我们可以通过background-size来设定背景图像的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px* 200px:这表示把背景图片大小调整为宽度950像素,高度200像素。

5、关于background-size的语法说明：（1）属性名:background-size（2）属性值:<bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain（3）初始值:auto auto（4）应用于:所有元素（5）继承性:无（6）百分比:后面会说明（7）计算值:根据指定

6、语法解释：length（长度犬匮渝扮），percentage（百分比）。我们可以根据给定长度值或者百分比来调整背景图片大小。当auto为默认值，这三个值最小可重复一次，最大重复两次。第一个值为图片宽度，第二个值为图片高度，不能为负值.(1).假如只给一个值，那么第二个自动的为 'auto'；(2).假如为percentage（百分比）值，那么背景图大小根据相对的背景区域来做调整，这个背景区域是由background-origin来来决定的。

7、代码说明：/* 一个值: 这个值指定图片宽度，第二个值为auto */background-size多唉捋胝: autobackground-size: 50%background-size: 3embackground-size: 12px/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。 */background-size: auto, auto /* 请区别于background-size: auto auto*/background-size: 50%, 25%, 25%background-size: 6px, auto, containbackground-size: inherit朋友们，关于背景图像大小的设置，你们明白了吗？