Responsive Background Images Part 2: Harnessing element() For The Future

In the first part, Responsive Background Images With or Without image-set(): The Proven Way looked at the current way to make background images responsive. It is not without it’s down sides. I will discuss these and present a new way to use an img tag, or any tag, as a responsive – and even dynamic and animated – background for any element.

image-set() Con: Existing Content Management System Blocks/Extensions

Block elements and extensions as well as built-in features within existing Content Management Systems (CMS) are all designed to use previous and current generation CSS. Image-set() is not meant as a translation of the img tag’s srcset and sizes attributes. Media queries balloon out the size of CSS and are difficult to update and control. Extending existing blocks and extensions don’t always catch every case and many third-party-developed extensions may not even be modifiable.

Many people will continue to use the existing elements and blocks they are familiar with. This means many existing sections won’t be able to make use of new ways to make backgrounds responsive.

Responsive Background Images In The Future: The element() Function

A new CSS function will allow developers to use an old and familiar pattern to easily provide background images that respond and update to size of the viewport of container. Additionally, this function allows the use of more than just images. Animations, dynamically updating content and videos can also be rendered as the background of an element.

The element() CSS function allows you to use any element on the page as the background of any other element. That means images that response responsively to the viewport or container queries. That also means any element with any content – text, images/canvas, video, or dynamically updated and animated content.

This function also allows developers to bypass existing CSS generations and implement an entirely new background image using an img tag, even a tag that already exists within the site – such as a featured or headline image.

element() Browser Support: Just Beginning

As of August 2024, the only browser that supports the element() function is Firefox. Why so little support? This is a new function, part of the CSS Images Modules Level 4, and there are still some issues to be addressed. Other browsers will start supporting it as the issues are ironed out.

Here is an example (as of August 2024, this will only work in Firefox):

<div id="element-background-test"></div>
<figure id="element-background-test-image-wrapper">
  <img id="element-background-test-image" ... />
</figure>
<style>
#element-background-test {
    background: -moz-element(#element-background-test-image) no-repeat;
    background: element(#element-background-test-image) no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 80vh;
    border: 4px solid black;
}
#element-background-test-image-wrapper {
    height: 0;
    overflow: hidden;
}
</style>

Granted, this is rather winded, but not as much as when using CSS media queries. The img tag can more easily be generated by most CMSes while I have not seen any that generate media queries.

You can mimic this today, in all browsers, using a stack.

Check back here for a link to part 3.