How to Use CSS Variables to Dynamically Set Background Images from Data Attributes?

Using Data-Attributes to Customize Element Appearance with CSS

In the realm of web development, there are numerous ways to control the appearance of elements on a web page using CSS. One common approach involves specifying the background images for elements. However, when working with dynamically generated HTML, obtaining the image source URLs becomes a challenge.

Consider the following HTML structure:

<div class="thumb" data-image-src="images/img.jpg"></div>

Our goal is to leverage the data-image-src attribute within the HTML to set the background image URL for each .thumb element in our CSS.

.thumb {
    width: 150px;
    height: 150px;
    background-position: center center;
    overflow: hidden;
    border: 1px solid black;

    /* The key issue: How to use the data-image-src attribute to set the background image? */
    background-image: attr(data-image-src);
}

While the intended syntax is correct, it will not work as expected. To resolve this issue, we can employ a technique that leverages CSS variables. By storing the image source URL in a CSS variable, we can refer to it within the background-image property.

<div class="thumb">
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

Utilizing CSS variables offers cross-browser compatibility, ensuring that the technique works as intended in various browsers, including those that do not support full data-attribute functionality.

Now, the browser will dynamically set the background image of each .thumb element based on the value specified in its corresponding data-image-src attribute, providing a flexible and efficient way to control element appearance using data-attributes.