Results 1 to 3 of 3

Thread: Fit to screen in watermark script

  1. #1
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fit to screen in watermark script

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,371
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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:
    Code:
    <style type="text/css">
    body {
    background:url('img/transparentnewheads.jpg') #E9E9F1 center no-repeat fixed;
    }
    </style>
    or:
    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks!

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •