Check out some similar questions!

magic1089 · Jul 26, 2009, 07:17 AM

I am using a backgroud image in a web site, how can I make it to fit any screen size or resolution, I set all to 100% but it still displays different on different pc's, please email me at [email protected] Thanks

crigby · Jul 30, 2009, 05:51 PM

Hi,
Images are a given size when made; they will not resize by screen resolution without the help of JavaScript. A script can probe resolution and return a graphic to match it from a library of graphics; or size a sufficiently large graphic down to a resolution.
No way with HTML and/or CSS.
Peace,
Clarke

magic1089 · Jul 30, 2009, 10:44 PM

Thanks for the advise, any isead where I can get the script and I am still new to this where must I inser the script, the web I want to resize for all resolutions is Mystica Belly Dancin School

crigby · Aug 1, 2009, 05:53 AM

Hi,
Took a bit of research and thought; I looked at the site and was pleasantly surprised. Liked the JavaScript stars (though I did not figure out what happened to "5".)
Part of the time I was puzzled by the extra scrollbar (it is in the stars JavaScript, but I have no correction yet but saw something about it.)
What I did find! Several ways of doing it with JavaScript (I will use JS for brevity), and one with non-valid CSS. The JS varieties fell into three varieties; all used JS to detect the screen resolution, and some browser-specific loops. These involve separate graphics, separate pages and a mixture of those two and stylesheets.
The separate page and graphics ones should be fairly self-explanatory; as I said I thought the graphic area was where the solution lay.
I have to admit I was "wrong" in that the best solution I found was in the non-valid CSS. I kind of wondered when I posted that before (I knew it could not be done in valid HTML or CSS, so I assumed JS.) Lo and behold it comes from one of the premier CSS gurus (and experimentors) that I know of.
All the solutions other than separate pages basically depend on modern browsers so define a decent background color for the body. In those cases your stars will probably be absent, also.
Okay, the "trick" basically boils down to using a property in the style that is not one; comes from how the programmers have to actually build the browsers vs. the people who make the standards for CSS. IE will let you change the colors of the scrollbars, but it is done in the "html" property that does not actually exist. This one uses it also; and as with every solution except separate pages, actually puts the background graphic in a "div" just inside the "body" (the JS does too.) So now I have gone on long enough; I wanted to explain a bit about the decision and how I reached it. The code in the "head" is:

<STYLE type=text/css>
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 100%
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 100%
}
BODY {
FONT-SIZE: 76%; FONT-FAMILY: verdana, arial, sans-serif
}
#background {
Z-INDEX: 1; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%
}
#content {
PADDING-RIGHT: 300px; PADDING-LEFT: 200px; PADDING-BOTTOM: 20px; PADDING-TOP: 5px
}
P {
LINE-HEIGHT: 1.8em; LETTER-SPACING: 0.1em; TEXT-ALIGN: justify
}
#fixed {
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 10px; Z-INDEX: 10; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; COLOR: #567; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 25px
}
</STYLE>

and you use some special HTML with it:

The trick is in the defining the three places as "100%" and paddings as "0" (html, body and #background) and "z-index." Checked with a few newer browsers and some not (the "not"s failed as expected.)
This was originally done by Stu Nicholls and can be found at:
stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation
Peace,
Clarke
PS CSS 3.0 will allow it