HTML td+background=url+my logo = FSKED!!!!

[steelcity_ballin]

Okay i have setup a nice layout in pure html notepad so thats all im using. My layout, i enjoy, and can bee seen (nowhere near done) at
http://www.lazyjosh.com/piratepete.htm

The box with "logo goes here" is what im having trouble with. So far, everything is set via percents so that 800x600 see essentially the same thing as 1024 etc etc....

Now, i have an image i want to use as hte background for that specific table cell. It works when i apply it etc but it tiles it if its too small and looks ugly...

How can I a) have it stretch the image to fit the cell no matter the resolution the user is using, and b) keep it from tiling if the user has an insanly large scree res...

Any ideas? I'm using html and styles via css only. No programs alloud!

[Aphasia]

Should be some way to turn it off. I use my background via the css file and have to have the repeat command, cant you do something like that, define a css id segement with that background, or does it tile that by default too.

[steelcity_ballin]

i made a style element ..... td {background:no-repeat}



that works fine for reapeats, but how can i get the image to automatically fill in the gaps by stretching itself if its too small or scaling itself down if its too big....

Thanks!

[etilena]

If I get you correctly, what I usually do for these cases is to fix the size of the cell for your logo, say 500 x 300 or something. What you do is create a table with 3 columns, so the centre one is the one with the fixed length, or 500 width, and the ones on the right and left are set to percentages or * (no fixed length), so you don't have to worry about resolution scaling as the logo is always fixed, just the sides do the scaling.

[fc34]

Well, you could use Javascript to change images depending on screen size. The syntax is:

Code: Select all

function getScreen()
{
     var height = screen.height;
     var width = screen.width;
}


Then Since u have fixed percentages for ur table, say 20%, just do a calculation for the screen size, i.e.

Code: Select all

var imageHeight = height * 0.2

And you wont need all that many images, since almost everyone uses two resolutions now, 800x600 and 1024x768