CSS - images and replaced content

Back to the index.

CSS3 Images and Replaced Content specification.

By far the most important part of Images and Replaced Content is gradients. Still, there are a few other interesting properties.

This is the desktop table. See also the mobile table.

Last major update on 21 November 2014.

If you want to study gradients, start with the Introduction to gradients.

Compatibility

The WebKit-based browsers still use prefixed middle syntax for gradients. That’s all noted as Alternative.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 26 Win 26 Mac 14.10 Win 14.10 Mac
No Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes
To rotate an image. No Yes No No No No
To treat an image as if it is a background-image when it comes to fitting it in its box. No No No Yes Yes Yes
To treat an image as if it is a background-image when it comes to positioning it in its box. No No No Yes Yes Yes

Same syntax as background-position.

The following properties are not supported in any browser.

Main gradient test

This is the main gradient test. If a browser fails it, it gets a No and I don’t investigate it any further.

This is an example of a cross-browser linear gradient.

background: -webkit-linear-gradient(0deg,red 10%,yellow 30%,green 60%);
background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);

This is an example of a cross-browser radial gradient.

background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);

Tested browsers

Desktop browser test array 2.0.3; November 2014

IE7 and lower
I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations
IE11
Trident
On Windows 8.1 virtualization
On Surface
Firefox
Gecko 33/32
33 on Win7 and Mac; 32 on Linux (can’t update)
Safari
WebKit
7.0.5 on Mac
Chrome
Chromium 38/37
38 on Win7 and Mac; 37 on Linux (can’t update)
Opera 26
Chromium 38
26.0 on Win7 and Mac
Yandex 14.10
Chromium 37
14.10 on Win7
14.10 on Mac

Operating systems

Mac
MacBook Pro 17'' with OS 10.9.4
This is my main test station. It also runs all virtual Windows systems.
Windows
All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface
Microsoft Surface with Windows RT 8.1
Linux
Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.