Background-image

Stub

This article is a stub. Please help the wiki by coding it. Spamming and vandalism is not considered an improvement and will result in discipline, up to, and including a permanent block.

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.

Values

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("http://images1.wikia.nocookie.net/__cb20100613040032/htmlcss/images/a/a4/HTMLCSS.png");">QWERTY</span>

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

h1 {
     background-image:url("http://images1.wikia.nocookie.net/__cb20100613040032/htmlcss/images/a/a4/HTMLCSS.png");
     background-color:black;
}

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