CSSImageValue

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

The CSSImageValue object represents an <image> that involves an URL, such as url() or image(), but not linear-gradient() or element() .

Properties

None.

Methods

Inherits methods from 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(magicwand.png) aqua;
}

We get the element's style map. We then get() the background-image from the stylemap 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() );

Specifications

Browser compatibility

See also

• CSSKeywordValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue