CSSImageValue
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 a URL, such as url() or <image()>, but not linear-gradient() or element().
Instance properties
None.
Instance methods
Inherits methods from CSSStyleValue.
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:
js
// 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
| Specification |
|---|
| CSS Typed OM Level 1 # imagevalue-objects |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSImageValue
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.