The background-image property is used in CSS and certain HTML elements. This property sets a background image which is rendered on top of an available background-color property, so it is a good choice to also include a background color in case the background image is not available.


Value Description
URL Specifies the location of the image through web address.
none Specifies that no background image should be applied.
-moz-linear-gradient Requires Gecko.
-moz-radial-gradient Requires Gecko.
-moz-element Requires Gecko 2.0.
-webkit-gradient Requires WebKit. (parameters are (type, frompoint, topoint, [stopcolor]*))

To apply this in HTML, use:

<span style="background-image:url("");">QWERTY</span>

To apply this in CSS, in the h1 element for example, use:

h1 {

In addition to using images, you can also use gradients. To apply a silver gradient, in the div element for example, use:

div {
      /* Safari 4-5, Chrome 1-9 */
      background-image: -webkit-gradient(linear, left top, right top, from(#C0C0C0), to(#707070));
      /* Safari 5.1, Chrome 10+ */
      background-image: -webkit-linear-gradient(left, #C0C0C0, #707070);
      /* Firefox 3.6+ */
      background-image: -moz-linear-gradient(left, #C0C0C0, #707070);
      /* IE 10 */
      background-image: -ms-linear-gradient(left, #C0C0C0, #707070);
      /* Opera 11.10+ */
      background-image: -o-linear-gradient(left, #C0C0C0, #707070);
Community content is available under CC-BY-SA unless otherwise noted.