Member Avatar for Saldash

Hi folks,

This is something im completely new to, so you'll have to bear with me.

In a single cell in a table, I need a background picture that stay behind
all of the text and other images, but also stays in the lower right corner of the cell even when the cell size is changed.

I don't know if this is Javascript, DHTML or what,
But I would be very appreciative if someone could point me in the right
direction here..

Thanks alot.

  • 4 Contributors
  • 3 Replies
  • 102 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Three practical routes were already suggested in the thread: using a CSS background (as noted), putting a floated element (as suggested), and the accessibility caution from . For a single cell that must keep a decorative image stuck to its lower-right corner while the cell resizes, the most reliable approach is to make the cell a positioned container and place the decorative image absolutely inside it. That gives precise control without affecting surrounding layout.

A minimal pattern (keeps the image decorative, clickable content above it, and it anchored to the cell corner):

<td class="cell">
  <img src="deco.png" class="deco" alt="" aria-hidden="true" />
  <div class="content">Cell text and other inline elements</div>
</td>

td.cell { position: relative; }
td.cell .deco {
  position: absolute;
  right: 6px;
  bottom: 6px;
  pointer-events: none;
  z-index: 0;
  max-width: 40%;
  height: auto;
}
td.cell .content { position: relative; z-index: 1; }

@media print { .deco { display: none; } }

Make the image truly decorative by using an empty alt attribute or aria-hidden="true" so assistive tech ignores it (guidance: WebAIM). Ensure text contrast remains WCAG-compliant; if the artwork reduces legibility, add a subtle opaque overlay behind the text or reduce image opacity. If the image is purely ornamental and no overlap control is needed, a CSS background on the cell is lighter and simpler; if the image must layer beneath specific inline elements or use click-through behavior, the absolute-image pattern above gives you explicit stacking control (see CSS positioning and pointer-events docs).

Troubleshooting tips: test with different cell widths and on print; use pointer-events: none so the image does not block links; avoid negative z-index hacks (they can create cross-browser stacking surprises). For accessibility and contrast checks, follow WCAG guidance and validate with a screen reader and a color-contrast tool.

Recommended Answers

All 3 Replies

Member Avatar for fayola

ok simplest way is via css

td.blbg
{
  background-image: url("yourImage.jpg");
  background-repeat: no-repeat;
  background-position: bottom right
}

and html would look something like:

<td class="blbg">
Your content
</td>
Member Avatar for MJ Pieterse

i would suggest that you rather use a floated div for that image that you align with css. it won't work correctly if you use a background image if the cell that the picture should be behind is not the bottom right cell in your table.

Member Avatar for MidiMagic

Please realize that placing text on top of an image is not accessible web design. Many people with visual handicaps can not read the text when there is an image under it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.