fill table bg with 100% of image no repeat

[dru_nasty]

Is there a way to do this, i can't seem to figure it out, if it's even possible.

I've got a table with a fixed width, say 400px. With some text and line breaks in there say its now 400px height. I've got an image of say 200x200. I'd like to make that image the background of the table and have it fill the entire table cell 100% of the 400x400 size WITHOUT repeating. So say an image was placed inside the cell that was 700 in width, the bg image would stretch accordingly to fill it.

Anyone got ideas?

[fasterthanlight™]

Hrmmm, I don't know why you would want to do this, an image of 200% its original size is at least half the quality of the original size. Would be a hideous result.

[dru_nasty]

Hrmmm, I don't know why you would want to do this, an image of 200% its original size is at least half the quality of the original size. Would be a hideous result.

Yeah i hear ya, this is actually a project for myspace and being able to fill the tables with an image as opposed to tiling a bg. As far as I know it's not possible with CSS2, maybe in 3, who knows, thanks for posting though.:beer:

[fasterthanlight™]

Hrmm, I've never applied styles to images before so I don't know if this would actually work....

img
{
width: 100%;
height: 100%;
}

however that will probably make the image its normal size, so try

img
{
width: 400px;
height: 400px;
}


Again, i have no idea if this will even work!

[dru_nasty]

Hrmm, I've never applied styles to images before so I don't know if this would actually work....

img
{
width: 100%;
height: 100%;
}

however that will probably make the image its normal size, so try

img
{
width: 400px;
height: 400px;
}


Again, i have no idea if this will even work!

It's a good idea, but the image has to be scalable in case an image is put in the table that is wider than its set width and height. So if the table has to stretch, the image must stretch with it, so setting a width and height for the img won't do it.

I just don't think it's possible. Not a big deal if it isn't, this is a trial and error project ;)

[DDD]

not possible, maybe some clever flash, with a z-index div over it may work.

[dru_nasty]

not possible, maybe some clever flash, with a z-index div over it may work.

Yeah, im sure it could work with some trickery, but in the case of myspace and dealing with their pre-existing table structure i don't think there is a way. With a div overlay, but not with the default myspace code.

[simplistik]

not possible... also the img tag only affects things that are declared in your html as <img> it won't affect a background image.

[noTime]

Possible, but only in IE (dispose the idea :smirk2:):



div.yours {
width: 100%;
height: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='scale');
}