Member Avatar for ndiiie

Hi all,

I want to ask how to fit the image as background of one cell in a table?

Here is my snippet code:

<table border ="0" cellpadding="2" cellspacing="4">

<%
    for( .... ){
%>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>In this cell I want to add the image as the background..how can i do it and fit the whole cell? I tried to use below code but it doesn't work well</td>
                    <!--<td BACKGROUND="baloon.png"></td>-->
                </tr>

<%
    }
%>
</table>

Anyone has idea how to solve it ?
thanks

Edited by ndiiie because: n/a
  • 2 Contributors
  • 2 Replies
  • 67 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ndiiie

Dani AI

Generated

wanted the image as a cell background and to have it scale to the cell; pointed at using CSS but the snippet used in the thread was incomplete. The reliable way is to use CSS (a class on the TD) and the CSS3 background-size options, or to place an actual IMG and use object-fit. background-size: cover makes the image fill the cell (cropping if necessary); contain preserves the whole image but may leave gaps.

A minimal example (apply a class to the TD) — adjust names and paths to your project:

td.balloon {
  background-image: url('balloon.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

If you prefer an IMG so the picture is part of the DOM (useful for accessibility or older browsers), put the IMG inside the TD and let it fill with object-fit:

td img.fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Troubleshooting notes: ensure the TD actually has height (empty cells can collapse), use padding or an explicit height on the TD or a block inside it, and check the image URL spelling and path. background-size and object-fit are well supported in modern browsers; see the spec/compat details on MDN for background-size and object-fit for exact browser support and behavior (background-size, object-fit).

Recommended Answers

All 2 Replies

Member Avatar for urtrivedi

<td style="background-image:baloon.png" >

Member Avatar for ndiiie

<td style="background-image:baloon.png" >

Sorry it doesn't work...
it doesn't fit the whole cell..

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.