Stretch a picture to fill up the whole background of a webpage?

[robot180]

Maybe I was confused. I thought he wanted it as a background. If you just want the image to take up the whole screen then just put width="100%" in the img tag. No frames or tables required.

[Astronouth7303]

Originally Posted by robot180

Maybe I was confused. I thought he wanted it as a background. If you just want the image to take up the whole screen then just put width="100%" in the img tag. No frames or tables required.

That's what I suggested.
Why not put the page in a table with a width equal to the width of the image?

[Elgin Clock]

Originally Posted by robot180

Maybe I was confused. I thought he wanted it as a background. If you just want the image to take up the whole screen then just put width="100%" in the img tag. No frames or tables required.

I do want it as a background. An image as a background.

And I want it to take up the whole screen, kind of like how on the desktop you can stretch an image (larger or smaller) to fit the screen as your background.

I can see that this may require an alternate plan though... :sigh:

edit: OK, let me try and explain what I am trying to do here first, and then you can offer alternative suggestions.

The look that I want on this web page is for an image to fill the whole page as a background. It's basically supposed to look like a piece of paper, on top of which I have tables of images which are I believe 3X4 (3 Rows of 4 images).

The image looks like a piece of stationary, and I want it to fit perfectly on the page with the tables of images sitting "on the paper".

When I finally secure my domain name, and find a host for this web project, I can show you all what I mean by linking you to it.
(And I will also send out a call for image submissions as well - Stay tuned )
But for now, you just have to try and picture it. Sorry.

Thanks everyone for your help by the way.

[robot180]

I understand exactly what you are saying and the best way I can think of is to make two images, same image but different canvas sizes. One 800 by 600 and the other 1024 by 768. Then, use JavaScript to detect the window size and display the appropriate image. Otherwise, use one image, 800 pixels wide, and center it on the page. This will leave a border when viewed in a higher resolution. Those are the closest ways that I can think of.

I think that some CSS properties should be added to allow you to resize a background image, unless there are in CSS2, I don't know.

[jonathan lall]

Hmm, Elgin, could you upload the image? I have an idea.

An aside, there are more than two resolutions people use. I would support at least up to 1600 x 1200. Other popular ones include 640 x 480, 1152 x 864, 1280 x 960, and 1280 x 1024.

[mtrawls]

Originally Posted by Elgin Clock

It's basically supposed to look like a piece of paper, on top of which I have tables of images which are I believe 3X4 (3 Rows of 4 images).

Paper is pretty much regular, no? So why not make the image so that it looks good with tiling, and the problem can be avoided.

And I will repeat the point again: please, oh please, do not assume a viewer is looking at your site with a particular resolution (or browser, for that matter). Many people browsing the net have old computers, many set on 800x600 res. And there are many other resolutions too. You should try to make your site look good regardless of how the user is viewing the page, so far as reason permits.

Oh, and doing web design, little things like this always come up and tend to stress you a lot. Don't let it bother you -- just remember that the content is much more important than the aesthetics of the layout. Make sure the content can be accessed before you pull your hair out

[Max Lobovsky]

I really don't like this solution, but at least in IE, there are pages that open that have a fixed window size. I'm not sure exactly how its done, but click on high bandwidth on this page: http://www.phsrobotics.com/ (team 007's page). Personally, I'm annoyed when a page opens like this, but if its for some sort of special use thing, it might be alright...

[Mike AA]

Elgin, I think if I'm right this is what you kinda want to do? HERE This is on my server, I simply made up a mock notepad in paint and wrote a VERY simple code. Is that what you're thinking of?

-Mike

http://mike-site.us

[robot180]

I think he ment more like stationary (a piece of plain paper with a fancy border and stuff, maybe with lines, not notebook paper), but I could be wrong. I don't know if there is any easy way to do it, which brings up another point.

However you do it, make sure it works well, if you want high traffic. There are cheap ways of doing it, but the cheap ways might not be the best idea. I had a lot of ideas for websites that I have made, but they didn't look as good after being coded or they didn't look the same in all browsers and resolutions so I had to scrap the idea and try something else, no matter how much time I spent on the idea or no matter how much I liked it. Don't let it frustrate you, but think about alternative ideas that would work better. So instead of paper, maybe something similar that is symetrical so that it can be repeated.