Fit to screen in watermark script

[trocadero]

http://www.dynamicdrive.com/dynamicindex3/fixback.htm

I am using the above script in our school's website at www.kimbparkss.eq.edu.au I bought a new widescreen laptop last week, and realize that the watermarked images I have used to be backgrounds on every page are not wide enough. Rather than adjust every image, and risk making scroll bars appear, could anyone tell me how to change the code so that the image will stretch to fit any screen size?

This is such a great website - my students absolutely love it!

Carolyn Nightingale

[jscheuer1]

Well, the script isn't really designed to be used with an image of that size. Bear in mind that a real watermark is usually a small design or image imprinted on a document for security reasons, not something that covers the entire background of the paper. That being said, I can think of a few alternatives for you. First of all you needn't be afraid of a larger image causing scrollbars, as a background image is automatically cropped to fit the available screen size. However, the larger the image, the slower your page will load and there will always be a larger monitor on which it will still be too small. So, either come up with a smaller image that will look good centered on any sized page, or tiled (repeat instead of no-repeat). Another option is, where it says 'white' in the script, change that to a dominant color from the image (try '#E9E9F1' without the quotes around it). That will fill in the blank space with a color that blends in. You really don't need a script at all for this effect, you can use pure style inserted in the head of the document try:

<style type="text/css">
body {
background:url('img/transparentnewheads.jpg') #E9E9F1 center no-repeat fixed;
}
</style>

or:

<style type="text/css">
body {
background:url('img/transparentnewheads.jpg') #E9E9F1 center repeat fixed;
}
</style>

Once you break it out this way, altering the values to suit becomes more manageable and it will work on browsers with or without javascript enabled. See this link for all the choices available to you:

http://www.blooberry.com/indexdot/cs...colorbg/bg.htm

Just changing 'no-repeat' to 'repeat' will be a big improvement on that larger screen.

[trocadero]

Thank you very much! How much simpler that is! I have been a bit reluctant to use css but that is so neat and straightforward. It looks fine with the grey around it - I will make the images more uniformly sized though. Thanks again - I appreciate your time.

carolyn