0

I am using the same image multiple times in an HTML table using CSS. Here is simplified code below with truncated 64 bit data to save space:

<html>
<head>
    <style>
        .my_image {
            width:125px;
            height:75px;
            background-image:url(data:image/png;base64,iVBORw0...);
        }
        
        .table {
            width: 100%;
        }

        .h_global {
        font-family: "Garamond";
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-align: center;
        background-color: Black;
        color: white;
        }

        .h1 {
            font-size: 48px;
            line-height: 10px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <table class="table">
        <tr>
            <td class="my_image">
            </td>

            <td class="h_global h1">
                Some Text
            </td>

            <td class="my_image">
            </td>
        </tr>
    </table>
</body>

How can I title and hyperlink the image? I don't need a different URL for each instance, can I add it to the CSS class somehow?

Experimentalist
  • 28
  • 1
  • 1
  • 6
  • 4
    Links are content. Images that inform people where a link will go are content. Neither are the purview of CSS, which describes how to present the content. (And don't use tables as layout hacks, we have Grid and Flexbox now). – Quentin Aug 31 '23 at 16:44
  • I admit my knowledge is very limited. How would I achieve the goal then of loading a 64-bit encoded image once, assigning it a hyperlink, and using it multiple times? – Experimentalist Aug 31 '23 at 17:11
  • You won't. It's not a hyperlink, and it will never be a hyperlink. It's a background style, and your sample above already uses the image several times. That's how you do it. Wherever you want that background, you add the `my_image` class. – Tim Roberts Aug 31 '23 at 17:28

0 Answers0