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 8 March 2013.

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.

Selector or declaration IE9 and lower IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5.1 Mac Opera 12.14 Win Opera 12.14 Mac
No Yes Yes Yes Yes Yes

This entry states if the browser supports either unprefixed new syntax or -webkit-prefixed middle syntax. If the browser does not support the example below on this page it gets a No here and I don’t investigate it any further.

No Yes Yes Yes Yes Yes

This entry states if the browser supports either unprefixed new syntax or -webkit-prefixed middle syntax. If the browser does not support the example below on this page it gets a No here and I don’t investigate it any further.

To treat an image as if it is a background-image when it comes to fitting it in its box. Prefixed No No No No Yes
Prefixed To treat an image as if it is a background-image when it comes to positioning it in its box. No No No No Yes

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%);