CSSImageValue

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

TheCSSImageValue interface of theCSS Typed Object Model API represents values for properties that take an image, for examplebackground-image,list-style-image, orborder-image-source.

The CSSImageValue object represents an<image> that involves a URL, such asurl() orimage(), but notlinear-gradient() orelement().

Instance properties

None.

Instance methods

Inherits methods fromCSSStyleValue.

Examples

We create an element

html

<button>Magic Wand</button>

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

css

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 elementconst button = document.querySelector("button");// Retrieve all computed styles with computedStyleMap()const allComputedStyles = button.computedStyleMap();// Return the CSSImageValue Exampleconsole.log(allComputedStyles.get("background-image"));console.log(allComputedStyles.get("background-image").toString());