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

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - Stretch a picture to fill up the whole background of a webpage? (http://www.chiefdelphi.com/forums/showthread.php?t=29748)

Elgin Clock

28-07-2004 02:14

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.

Astronouth7303

28-07-2004 02:19

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

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

Elgin Clock

28-07-2004 03:19

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

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

28-07-2004 04:18

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

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

Elgin Clock

28-07-2004 04:25

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

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

28-07-2004 04:49

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

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

28-07-2004 14:42

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

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

28-07-2004 16:33

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

Quote:

Originally Posted by robot180

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:

Astronouth7303

29-07-2004 04:03

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

Quote:

Originally Posted by Elgin Clock

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

jonathan lall

29-07-2004 14:40

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

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? :rolleyes:

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

29-07-2004 14:55

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

Quote:

Originally Posted by jonathan lall

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

30-07-2004 23:20

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

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

30-07-2004 23:29

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

Quote:

Originally Posted by robot180

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	30-07-2004 23:49

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

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

31-07-2004 00:44

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

Quote:

Originally Posted by Elgin Clock

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

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

robot180

31-07-2004 11:56

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

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

31-07-2004 12:15

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

Quote:

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

31-07-2004 12:46

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

Quote:

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

Thanks everyone for your help by the way.

robot180

31-07-2004 17:29

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

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

31-07-2004 17:42

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

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

31-07-2004 20:42

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

Quote:

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

31-07-2004 20:53

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

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

01-08-2004 02:56

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

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

01-08-2004 13:48

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

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.

All times are GMT -5. The time now is 09:05.