CSSImageValue

{{APIRef("CSS Typed Object Model API")}}

The CSSImageValue interface of the CSS Typed Object Model API represents values for properties that take an image, for example {{cssxref('background-image')}}, {{cssxref('list-style-image')}}, or {{cssxref('border-image-source')}}.

The CSSImageValue object represents an {{cssxref("image")}} that involves a URL, such as {{cssxref("url_function", "url()")}} or {{cssxref("image()")}}, but not {{cssxref("gradient/linear-gradient", "linear-gradient()")}} or {{cssxref("element()")}}.

{{InheritanceDiagram}}

Instance properties

None.

Instance methods

Inherits methods from {{domxref('CSSStyleValue')}}.

Examples

We create an element

<button>Magic Wand</button>

We add some CSS, including a background image requesting a binary file:

button {
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background: no-repeat 5% center url("magic-wand.png") aqua;
}

We get the element's style map. We then get() the background-image from the style map and stringify it:

// get the element
const button = document.querySelector("button");

// Retrieve all computed styles with computedStyleMap()
const allComputedStyles = button.computedStyleMap();

// Return the CSSImageValue Example
console.log(allComputedStyles.get("background-image"));
console.log(allComputedStyles.get("background-image").toString());

{{EmbedLiveSample("Examples", 120, 300)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{domxref('CSSKeywordValue')}}
• {{domxref('CSSNumericValue')}}
• {{domxref('CSSPositionValue')}}
• {{domxref('CSSTransformValue')}}
• {{domxref('CSSUnparsedValue')}}