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

Elgin Clock · #1 28-07-2004, 02:14

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.

Astronouth7303 · #2 28-07-2004, 02:19

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

Elgin Clock · #3 28-07-2004, 03:19

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

Umm.. I have it set up originally as

Code:

 <body background="Image X.gif">

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

K.Shaw · #4 28-07-2004, 04:18

try..... <body background="Image X.gif" width="100%" height="100%">

Elgin Clock · #5 28-07-2004, 04:25

Quote:

Originally Posted by K.Shaw

try..... <body background="Image X.gif" width="100%" height="100%">

nope...

And I even tried closing it with an extra </body> tag too...

Elgin Clock · #6 28-07-2004, 04:49

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..

Code:

<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

robot180 · #7 28-07-2004, 14:42

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.

Elgin Clock · #8 28-07-2004, 16:33

Quote:

Originally Posted by robot180

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?

Astronouth7303 · #9 29-07-2004, 04:03

Quote:

Originally Posted by Elgin Clock

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?

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

jonathan lall · #10 29-07-2004, 14:40

Quote:

Originally Posted by Elgin Clock

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?

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.

Elgin Clock · #11 29-07-2004, 14:55

Quote:

Originally Posted by jonathan lall

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.

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

Quote:

Originally Posted by jonathan lall

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.

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.)

robot180 · #12 30-07-2004, 23:20

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.

jonathan lall · #13 30-07-2004, 23:29

Quote:

Originally Posted by robot180

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.

rowe · #14 30-07-2004, 23:49

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.

jgannon · #15 31-07-2004, 00:44

Quote:

Originally Posted by Elgin Clock

Who surfs the web at 800X600 anyways?

*raises hand* 800x600 rocks for anything other than gaming.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: