...">
Geek Answers Handbook

Make background image td to match 100% for non-static images

I have a td tag:

<td class="np-logo" style="width: 228px; height: 50px;"> </td>

And CSS:

 .np-logo { background-repeat: no-repeat; background-size: 100%; }

And I change the image in accordance with the company logo. All images have different sizes and widths.

 .np-logo{background-image:url('" + companylogo + "');

The problem is that the images are not attached to td correctly. I want them to occupy whole td. but for each company, the position of the background image is not uniform. I even tried using a java script when loading an image to match the container, it didn't work.

any helpers ...?

+4
source share
3 answers

Try

 background-size: 100% 100%;

where the first value is for width and the second is for height.

You can learn more about this by following this link.

+5
source

Have you tried cover ?

 .np-logo { background-repeat: no-repeat; background-size: cover; }
+1
source

Try the following:

 <td class="np-logo" style="max-height: 100%; max-width: 100%">

or

 <td class="np-logo" style="max-height: 228px; max-width: 50px">
0
source

More articles:


All Articles