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

Page 1 of 2

Show 100 post(s) from this thread on one page

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.

All times are GMT -5. The time now is 10:42.

Page 1 of 2

Show 100 post(s) from this thread on one page