Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at




background-size 设置背景图片大小。

Note: 如果在设置 background-size 之后 background 又没有设置此属性,那么此属性取默认值(译注:css同一属性后面的覆盖前面的)。

初始值auto auto
适用元素all elements. It also applies to ::first-letter and ::first-line.
Percentagesrelative to the background positioning area
计算值as specified, but with relative lengths converted into absolute lengths
是否适用于 CSS 动画yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
正规顺序the unique non-ambiguous order defined by the formal grammar


Formal syntax: <bg-size>#

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值:设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit


<length> 值,指定背景图片大小,不能为负值。
<percentage> 值,指定背景图片相对背景区(background positioning area)的百分比。背景区由background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。如果attachmentfixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。


Gecko 8.0 note
(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)

This behavior changed in Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.

-moz-element 生成的背景图片,(which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.

Note: This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.


如果指定了 background-size 的两个值并且不是auto
autoauto auto:
图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例, 效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
一个为 auto 另一个不是auto:

注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+,以确定不同之处能否接受。


background-size: cover 演示 与  background-size: contain 演示 在新窗口打开,这样你可以看到当背景区大小变化时 containcover 是怎样的。 系列演示:background-size 及其与background-*属性的关联  很好的说明了单独使用 background-size 及与其它属性共同使用。


如果用渐变作为背景并且对它使用了background-size ,最好不要只用一个auto, 或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8有所改变, 并且目前各浏览器表现不一致,不是全部浏览器都完全支持 CSS3 background-size 规范CSS3 Image Values gradient 规范

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* 不推荐 */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* 可行 */
       background-size: 25px 50px;
       background-size: 50% 50%;

特别不推荐对渐变px与auto一起用, 因为Firefox 8之前不能重复渲染,并且对于没有实现Firefox 8渲染特性的浏览器,不知道指定了背景的元素的确切大小。


Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Candidate Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0-webkit [2] 3.6 (1.9.2)-moz [4] 9.0 [5] 9.5-o
with some bugs [1]
3.0 (522)-webkit
but from an older CSS3 draft [2]
3.0 4.0 (2.0) 10.0 4.1 (532)
Support for
contain and cover
3.0 3.6 (1.9.2) 9.0 [5] 10.0 4.1 (532)
Support for SVG backgrounds ? 8.0 (8.0) ? ? ?
Feature Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Basic support (Yes)-webkit
? ? ? ?
Support for SVG backgrounds ? 8.0 (8.0) ? ? ?

[1] Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.  Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10.

[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

[3] Konqueror 3.5.4 supports -khtml-background-size.

[4] While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using -moz-border-image.

.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */

[5] Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

This simulates the value cover.

See also


 此页面的贡献者: Sebastianz, teoli, yan
 最后编辑者: Sebastianz,