HTML background stretch?

[Lithium381]

I'd like to know how to have a background scale to fit the users screen resolution so my image doens't get cut off or repeated....the image itself is 1024x768 which seems to be a fairly popular resolution, but when users of other resolutions visit, how do i accomplish this? Javascript? CSS?

 

[igowerf]

I don't think there's a way to stretch the background image, but I think you could create a "fake" background using div tags and CSS. Basically have an image stretch to 100% of the height and width of the page and then using div tags, place your website over the stretched image.

You can also use javascript to do it. I found a website here.

 

[jonmullen]

CSS should work try putting this in the head.

<style type="text/css">

body{
margin:0px;
background-image:url(/path/to/image);
}
</style>

 

[igowerf]

That doesn't stretch the image though, does it?

 

[Barnaby W. Füi]

http://www.webmasterworld.com/forum83/303.htm

 

[glugglug]

How many people really have their browser windows maximized?

I strongly suspect most have the browser taller than it is wide, rather than a 4:3 aspect ratio in the browser, so stretching the image to match it will look like crap.

 

[Lithium381]

Originally posted by: glugglug
How many people really have their browser windows maximized?

I strongly suspect most have the browser taller than it is wide, rather than a 4:3 aspect ratio in the browser, so stretching the image to match it will look like crap.

hrm, i always have my window maximized, or stretched to be close to it...:-\


any other way that would look good, instead of stretching it.......and when loading it will it stay that same height+width for the entire session, what if they change the size of the window? (for johnmullen)

 

[Lithium381]

could i use javascript(if enabled) and find the resolution and then from there pick the most appropriate image to use somehow? It's been ages since i've done web stuff so i've got to relearn it all again

 

[notfred]

I never have browser windows maximized, fyi.

And yes, it's possible to make javascript determine the size of the window, and resize an image based on it, I use it on my site. I haven't tried to make it resize automatically based on someone resizing the window, though. I don't know if that can be done. This page uses it. Try resizing the window and then refreshing the page a couple times.

 

[Lithium381]

Originally posted by: notfred
I never have browser windows maximized, fyi.

And yes, it's possible to make javascript determine the size of the window, and resize an image based on it, I use it on my site. I haven't tried to make it resize automatically based on someone resizing the window, though. I don't know if that can be done. This page uses it. Try resizing the window and then refreshing the page a couple times.

well, i think i might opt for the javascript then, and at least choose an appropriate size if they care to maxmize....is it possible to by default have the window open maximized? or at least take up the whole screen?

 

[Kappo]

bah just put this in your stylesheet or in a style

BODY {
background-repeat : no-repeat;
background-image : url(pathtobackground/images/background.gif);
}

 

[glugglug]

Originally posted by: Lithium381
well, i think i might opt for the javascript then, and at least choose an appropriate size if they care to maxmize....is it possible to by default have the window open maximized? or at least take up the whole screen?

While it's probably possible, it isn't desirable.
Mozilla/Pheonix/etc have some major display bugs when the window is wider than 1600 pixels.

Also, popups and browser window property manipulation through webpages are in general, well, evil. At least I can disable those scripting features in Mozilla.

Something else you may want to think about:

The reason newspapers and magazines are printed in columns is because humans can actually read them much faster that way. The optimal column width is just narrow enough that your eyes don't have to move horizontally when reading it, and you can just scan down the page as you read. If you increase the window size (and consequently the text column) to 14", it is nowhere close to that width. Go to any site with only one main column (this messageboard for instance) and try reading it in what has to be insanely huge type at 1024x768, vs. reading it at 1920x1200 (or higher if you can) on the same screen, but with the window only 1024 or fewer pixels wide. I guarantee you the narrower window in the higher res will be faster to read and probably less tiring.

 

[notfred]

Originally posted by: Lithium381

Originally posted by: notfred
I never have browser windows maximized, fyi.

And yes, it's possible to make javascript determine the size of the window, and resize an image based on it, I use it on my site. I haven't tried to make it resize automatically based on someone resizing the window, though. I don't know if that can be done. This page uses it. Try resizing the window and then refreshing the page a couple times.

well, i think i might opt for the javascript then, and at least choose an appropriate size if they care to maxmize....is it possible to by default have the window open maximized? or at least take up the whole screen?

If your site were to open and maximize a window on my machine, first thing I'd do is shrink it back to my normal size. If it did it again, I'd go somewhere else unless your site was the ONLY place I could get what I was looking for.

Anyway, you realize how ridiculous a full screen browser window looks on a 1440x900 display? Half of it is just empty space.

 

[Lithium381]

well, the main thing is i want it to be behind all of my content........i geuss i could make a move to a table and use the table as a background and simply specify the width/height.....though if i didn't want it to repeat vertically that would severely limit me in my amount of content...:-\ any forseable ways around this?

 

[igowerf]

I browse with my browser maximized. My laptop screen is 1400x1050 too.