re-size table background image

[morleymouse]

Tweet

is there an easy way to resize a background image?

so I have something like this...

<table width="100" border="0" cellpadding="0" cellspacing="0" background="../images/image1.jpg">

Now say image1.jpg is actually 400px wide, all I can see i nthe table above is the top left hand corner of it. Is there an easy way to get the table to lad the image as a 100x100 image as the background?

Cant think of a way, without going through and resizing all the images, hopeful for ideas though

[Nosmo_King]

I'm not sure what you are trying to do.

As it reads... you want to use a 400 px wide image for a 100 px wide table.
Is this correct?

[morleymouse]

only as the background though, whats actually i nthe table is something completely different.

a bit like...

<table width="100" border="0" cellpadding="0" cellspacing="0" background="image1.jpg"><tr>
<td>blah blah table content not the background image</td>
</tr></table>

if it was just the odd image or so id resize them, but its a few thousand and I really cant be bothered... if I just had the image in the table I could set the width to 100 and that would be fine, but its the background

[Nosmo_King]

Still not sure if I'm reading your post properly

But anyway... say your image is 400 x 100 px's.
Using it as the background image will fill your 100 px wide table.
If your table was 600 px's high... the image would repeat to fill.

Mind...you may be better to use css.

Hope this helps

[morleymouse]

seems my explaining sucks

image is say 400x400. If i stick it as the background of a 100x100 table yeah it fills it, but it only fills it using the 100x100 top left hand squae of the main picture.

if the background image was 100x100 it would fill perfect, but its too bit just want to know if I can resize it without actually going through and resizing it, ie just set the width of it.

the more i think about it the more im convincing myself its impossible, shame

[Nosmo_King]

pm the bloody code and the picture

[morleymouse]

haha I can post an example, ill use an image from alpha, as im all secrative liek that

open up notepad or something and paste this in:

<table width="100" border="0" cellpadding="0" cellspacing="0" background="http://www.uni-graz.at/~katzer/pictures/citr_44.jpg"><tr>
<td>blah blah table content not the background image</td>
</tr></table>

the image is nabbed from G images but anything bigger than 100 wide would have done.

see the table will show the image but only fro mthe top left corner.

Idealy id want it so that the image looked like...

<img src="http://www.uni-graz.at/~katzer/pictures/citr_44.jpg" width="100">

So that you can tell what it is.

[Nosmo_King]

OK... now I think I see it... wait a mo

[Nosmo_King]

<div style="width:100px; position:absolute; left:0px; top:0px; text-align:center;">
<img src="/images/citr_44.jpg" style="width:100px; height:100px;">
</div>

Try that

[morleymouse]

nada, that just displays the image? It needs to be as a background as I have other stuff to go over the top.

Nothings making sense anymore think I needs some sleep! Thanks anyway though!

[Nosmo_King]

Sorry...think I need sleep as well.

I forgot to mention... I think the only way you'll be able to do this is with a div over the top over a div. Obviously change the divs to suit.

[monkeyboy]

Couldn't you use a script (aspx, php, etc) to resize the background image on the fly?

Just specify the script file as the background image, perhaps with the original image file name and it's new size specified on the querystring.

[stuey_p]

<table width="100" height"100" border="1" cellspacing="0" cellpadding="0" style="background: url(images/&image.jpg);width:400px;height:400px;background-repeat:no-repeat;zoom:25%;">

Is that any use?

[dmorison]

Hi Dan,

Just had a quick hack-around and it looks like you can do it using CSS and z-indexing to layer the image (resized as required) behind the table. This works as long as both image and table are enclosed within a container DIV, and both styled with "position: absolute;". Here's my test page (note that TD is styled to have white text so that it shows up over the background image!):

<html>
  <head>
    <style type='text/css'>
    #myImage {
      position: absolute;
      z-index: 1;
    }

    #myTable {
      position: absolute;
      z-index: 2;
    }

    td {
      color: white;
      text-align: center;
      font-weight: bold;
    }
    </style>
  </head>
  <body>
    <h1>Resized Background Image Test</h1>
    <div>
      <img id='myImage' width='100' src='img.jpg' />
      <table id='myTable' width='100' cellpadding='0' cellspacing='0'>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </table>
    </div>
  <body>
</html>

You might want to think about how this will appear in older browsers that do not support CSS & z-index, but depending upon what else you are doing this may not be an issue

[morleymouse]

cheers dmorison

ta everyone for ideas, had thought of some but for various reaosn wanted to do it like this