Fandom

HTML & CSS Wiki

Background-image

649pages on
this wiki
Add New Page
Comments0 Share

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.

ValuesEdit

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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.