0

I'm attempting to create a dynamic background image change in CSS, based on the text content within an element. Here's the context:

  • I have a table with a "status" column, where each cell in this column contains various text content, such as "Available" and "Expired"

  • My goal is to assign a background image to each cell in this column, matching its respective content.

Essentially, I'm looking for a CSS solution that can achieve the same dynamic transition effect seen with linear gradients. Here's an example:

span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    background:
        linear-gradient(rgb(247, 117, 110) 0 0) 0/calc(3.5rem - 100%) 100%,
        linear-gradient(hsl(123, 90%, 40%) 0 0) 0/calc(4rem - 100%) 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<span>Available</span>
<span>Expired</span>
<span>Available</span>
<span>Expired</span>

However, instead of using a linear gradient, I want to dynamically change the background image based on the content within each cell. I've attempted a CSS approach, but it defaults to using the first image.

span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    background:
        url(https://cdn-icons-png.flaticon.com/512/5268/5268742.png) 0/calc(3.5rem - 100%) 100%,
        url(https://cdn-icons-png.flaticon.com/512/5268/5268923.png) 0/calc(4rem - 100%) 100%;
    background-size: cover;
    -webkit-text-fill-color: transparent;
}
<span>Available</span>
<span>Expired</span>
<span>Available</span>
<span>Expired</span>

Is there a pure CSS solution that can achieve this dynamic background image change based on the cell's content?

what it should look like: enter image description here

I'm employing a pre-existing component for which I lack access to its HTML code, and I am unable to make alterations. Thus, my sole option is to manipulate it using CSS

Don't mind the height of the images; they're just for testing.

bxxb
  • 740
  • 1
  • 9
  • 20
  • How is the content updated? Would it not be possible to add the status as a class, rather than text content? – Jayx Sep 01 '23 at 16:18
  • I'm employing a pre-existing component for which I lack access to its HTML code, and I am unable to make alterations. Thus, my sole option is to manipulate it using CSS – bxxb Sep 01 '23 at 16:20
  • Also: no, you can't do this with CSS. – Jayx Sep 01 '23 at 16:20
  • You can do this with JavaScript, of course, why do you feel that CSS is your only option? – Jayx Sep 01 '23 at 16:22
  • I am utilizing an IDE that does not employ JavaScript, and when iterating over a stack of data, assigning CSS classes to each iterated row proves ineffective. – bxxb Sep 01 '23 at 16:24
  • I don't think you can style the element based on its text content. See: https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text – Moob Sep 01 '23 at 16:26
  • Yes, I cannot retrieve the contextual text exactly as it is, but the solution is to style it based on the width of the contextual text. I can do that with the linear gradient background . but now i wan't to do it with images – bxxb Sep 01 '23 at 16:31
  • Can you give each span a class of like: `class='expired'`? – imvain2 Sep 01 '23 at 16:40
  • Sadly, no i can't – bxxb Sep 01 '23 at 18:55
  • I don't think you need the `-webkit` vendor prefix for any of those anymore. – Rob Sep 02 '23 at 09:07

0 Answers0