Adjusting image size to fit

[BNArun]

I want to use an image as a table header background. I have tables of different widths. I want to use the same image for all those images. And how can we make that image to adjust it's width and height such that it fits for every table using CSS (only CSS)?

[jscheuer1]

You can't really. Not with a background. But if you don't mind the image being cropped and centered behind smaller headers, and had an image that was at least as big as the largest header, that could be done.

A sort of pseudo background could probably be setup using relative and absolute positioning, but certain key dimensions would need to be know, it wouldn't just scale itself automatically. Adding or subtracting text would probably throw it off, as could altering font-size in the browser.

[BNArun]

Thank you for your reply.

Then, what happens if I create a big (suitable for a large table) image and apply it for all tables? Will it get resized automatically?

[insanemonkey]

I think this might help, try this and see..

<STYLE TYPE="text/css">
<!--
.deepsea, .deepsea TD, .deepsea TH
{
background-image:url('deepsea.gif');
background-color:blue;
color:white;
font-family:sans-serif;
font-weight:600;
}
-->
</STYLE>

Thats the css part now this..

<TABLE CELLPADDING=8 CELLSPACING=0 CLASS="deepsea">

I don't know how this will work so try it how...

[BNArun]

It is also not working...


Can I use 3 images at a time as background images for an element?

That is, first one contains left rounded corners, second one contains center image (will be repeated to fill gap), third one contains right rounded corners.

(We must not use any other elements and have to use CSS only.)