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

Is there any code (preferably html) that would allow the background image of a webpage to fully take up the page no matter what resolution you view it at??

I have an image sized pretty good for the page size, but on some resolutions I see it is too small and it tiles the image.

Is there any way to stretch the image (larger or smaller) to the actual html page size?

I basically have a picture that is meant too look like a sheet of paper with an image at the bottom, and it tiles itself and starts the new “piece” of paper again.

I want this page to look like it was written on the piece of paper image and have it be contained within the page.

Any help would be greatly appreciated.

Thanks in advance.

try <img src=“image.png” width=“100%” height=“100%”></img>.

That just puts the image at the top of the page… arghh… lol

Umm… I have it set up originally as

 <body background="Image X.gif"> 

Anyway to modify that as it is and make it width 100% and height 100%?

try… <body background=“Image X.gif” width=“100%” height=“100%”>

nope… :frowning: And I even tried closing it with an extra </body> tag too…

Ok, I found out how to do it…
I’ll post it here for future reference in case anyone needs it.

I had to use CSS Style sheets…


<style>
body {
background-color: #ffffff;
background-image: url("Image X");
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll }
</style> 

That wasn’t so hard… lol

I think that only puts the picture in as the size of the image. I don’t think you can stetch it out to fill the page. The image has to be the size of the screen. For example, try viewing the page in a different resolution.

Thank you for raining on my parade… sigh… Back to the drawing board. It looks the worst on 800X600, Best on 1024X768, Ok on 1280X1024 and really small compared to the page on 1600X1200
ughh…

Oh well… I think I’ll just add a “This website is best viewed at 1024X768” note to the pages…

Who surfs the web at 800X600 anyways? :rolleyes:

I rarely have my web browser maximized. My screen res is 1152x864.

Please tell me you’re kidding. You are… right? That’s quite possibly the worst thing you could do. While it’s generally bad practice to do this, I’m guessing the effect you want could be acheived in Javascript, which detects browser screen sizes with ease. The hard part would be printing dimensions to a background-image; it can’t be done, but a half-solution would be to have a bunch of image files pre-stretched to certain screen sizes and changing the link to the background image URI based on resolutions through Javascript.

Are you trying to make the image static as the page scrolls? because I can show you how to do that. Anyway, if you link to the page, I’m sure something could be done.

Nope… not kidding. The look I want is only acievable by having the image stay the same size on all pages - or fit to page. I can’t believe there is no way to do this. I guess I’ll just have to make a way. I guess I can break it up. But that would require more knowledge than I have in HTML design, or a wysiwyg editor to lay out the images, which I refuse to use.
Notepad and text editor all the way. lol

No not at all. I found out how to do that though. Same CSS style sheet I tried but different attributes.

As for a page link, If I ever get it up and running on a server like I was supposed to do last week, I will gladly link it and show you what I mean.

Right now it is just in the development stages so far.
(Not a team website either - personal one.)

This might take a lot of work, but I am sure you can do it using CSS to move the image (in an img tag) so that it is behind the page contents with a lower z-index. This doesn’t sound like a great idea, but it might work. Then you can streth out the img tag to the width of the screen (100%). I might be missing something though.

I was thinking that. Theoretically it’s a promising idea, but z-index is really a joke in some browsers. It works differently in all of them, so that path is one of despair, IMO.

Have you tried using frames or tables. You could have more possibilities come from this including pages where the paper would dynamically resize to the browser without using any code other than HTML. This is how I would set it up: divide the page into 9 sections either in tables cells or frames, then have the corners be the corners of the paper, have the top section be the top of the paper and make both the frame/table cell and the picture the same height. Do the same for the sides and the bottom. The trick would be to align the right cells with the right and the left wit the left, etc. I have not coded in a while so I’m not sure of the exact method but I’m sure it’s possible, if not with straight HTML, then with CSS or javascript.

raises hand 800x600 rocks for anything other than gaming.

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?

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:D )
But for now, you just have to try and picture it. Sorry.

Thanks everyone for your help by the way.

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.

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.