CSS3 Background-image options

New properties to affect background images, including background-clip, background-origin and background-size

Spec	https://www.w3.org/TR/css3-background/#backgrounds
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			108
		107	107	TP
		106	106	16.1
11	105	105	105	16.0	91
10	104	104	104	15.6	90
9	103	103	103	15.5	89
8	102	102	102	15.4	88
Show all
7	101	101	101	15.2-15.3	87
6	100	100	100	15.1	86
5.5	99	99	99	15	85
	98	98	98	14.1	84
	97	97	97	14	83
	96	96	96	13.1	82
	95	95	95	13	81
	94	94	94	12.1	80
	93	93	93	12	79
	92	92	92	11.1	78
	91	91	91	11	77
	90	90	90	10.1	76
	89	89	89	10	75
	88	88	88	9.1	74
	87	87	87	9	73
	86	86	86	8	72
	85	85	85	7.1	71
	84	84	84	7	70
	83	83	83	6.1 (2,3)	69
	81	82	81	6 (2,3)	68
	80	81	80	5.1 (2,3)	67
	79	80	79	5 (2,3)	66
	18	79	78	4 (2,3)	65
	17	78	77	3.2 (2,3)	64
	16	77	76	3.1 (2,3)	63
	15	76	75		62
	14	75	74		60
	13	74	73		58
	12	73	72		57
		72	71		56
		71	70		55
		70	69		54
		69	68		53
		68	67		52
		67	66		51
		66	65		50
		65	64		49
		64	63		48
		63	62		47
		62	61		46
		61	60		45
		60	59		44
		59	58		43
		58	57		42
		57	56		41
		56	55		40
		55	54		39
		54	53		38
		53	52		37
		52	51		36
		51	50		35
		50	49		34
		49	48		33
		48	47		32
		47	46		31
		46	45		30
		45	44		29
		44	43		28
		43	42		27
		42	41		26
		41	40		25
		40	39		24
		39	38		23
		38	37		22
		37	36		21
		36	35		20
		35	34		19
		34	33		18
		33	32		17
		32	31		16
		31	30		15
		30	29		12.1
		29	28		12
		28	27		11.6
		27	26		11.5
		26	25		11.1
		25	24		11
		24	23		10.6
		23	22		10.5
		22	21		10.0-10.1 (*)
		21	20		9.5-9.6
		20	19		9
		19	18
		18	17
		17	16
		16	15
		15	14 (3)
		14	13 (3)
		13	12 (3)
		12	11 (3)
		11	10 (3)
		10	9 (3)
		9	8 (3)
		8	7 (3)
		7	6 (3)
		6	5 (3)
		5	4 (3)
		4
		3.6 (*)
		3.5
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
16.1
16.0	all (1)	105	10	64	105	104	11	13.4	18.0	13.1	13.18	2.5
15.6		4.4.3-4.4.4	7	12.1			10		17.0
15.5		4.4		12					16.0
15.4		4.2-4.3 (3)		11.5					15.0
Show all
15.2-15.3		4.1 (3)		11.1					14.0
15.0-15.1		4 (3)		11					13.0
14.5-14.8		3 (3)		10					12.0
14.0-14.4		2.3 (3,*)							11.1-11.2
13.4-13.7		2.2 (3,*)							10.1
13.3		2.1 (*)							9.2
13.2									8.2
13.0-13.1									7.2-7.4
12.2-12.5									6.2-6.4
12.0-12.1									5.0-5.4
11.3-11.4									4
11.0-11.2
10.3
10.0-10.2
9.3
9.0-9.2
8.1-8.4
8
7.0-7.1
6.0-6.1
5.0-5.1 (3)
4.2-4.3
4.0-4.1
3.2

Notes

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix). Safari does not support -webkit-background-clip: text; for <button> elements. But you can put <span> inside <button> to get the same result.

1. Partial support in Opera Mini refers to not supporting background sizing or background attachments. However Opera Mini 7.5 supports background sizing (including cover and contain values).

2. Partial support in Safari 6 refers to not supporting background sizing offset from edges syntax.

3. Does not support background-size values in the background shorthand

^* Partial support with prefix.

Bugs

• iOS Safari has buggy behavior with background-size: cover; on a page's body.

• iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;

• Safari (OS X and iOS) and Chrome do not support background-size: 100% <height>px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.

• Android 4.3 browser and below are reported to not support percentages in background-size

Resources

• Detailed compatibility tables and demos
• Polyfill for IE7-8
• MDN Web Docs - background-image