How Can Custom Properties Improve Background Image Setting in CSS?

Background Images with Custom Properties

Setting background images using data-image attributes and the attr() function can be problematic. Instead, consider using custom properties to achieve this effect purely with CSS.

Custom properties offer several advantages:

• Values are not limited to strings, allowing for any permissible property value.
• Runtime updates are possible by swapping stylesheets.

Code Example

Here's an example using a custom property to set background images based on a data-image attribute:

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div class="kitten">

This approach allows for easy background image assignment via custom properties, without the drawbacks of attr().

The above is the detailed content of How Can Custom Properties Improve Background Image Setting in CSS?. For more information, please follow other related articles on the PHP Chinese website!