Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Aug 2009
    Posts
    4
    Member #
    19601
    Hello all,

    I'm currently working on my first website and I've ran into quite the issue. I am trying to find a way to scale an image so that it will maintain its aspect ratio, but fit to any browser window. I don't mind up-down scrolling, but I would rather not have side scrolling and I would like to avoid borders. After some googling the code I found is as follows:
    Code:
    <style type="text/css">
    #background {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
    }
    </style>
    <body>
    <img id="background" src="Background.jpg"/>
    This is leaving me with a gap on the right hand side, as seen here:
    http://i207.photobucket.com/albums/b...ut99/site1.jpg
    This only occurs in IE and Frontpage, but in Firefox it doesn't have the gap.
    Any help with this would be great!

    Thanks
    Pat

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You probably already saw something like this:
    http://www.cssplay.co.uk/layouts/background.html

    It resizes, but is not proportional.

    So, I've been looking around for something that might maintain the aspect ration.

    I know it can be done using Flash:
    http://www.lessrain.com/index.php?localeISO=en_UK

    Here is an attempt without using Flash ... sort of close to what you want?
    http://css-tricks.com/how-to-resizea...kground-image/

    It seems like no matter what you do, you'll always have a blank edge as the
    aspect ration of monitors (and browsers) are different. I don't think you'll
    ever get away from a blank edge without distorting the image.


  4. #3
    Junior Member
    Join Date
    Aug 2009
    Posts
    4
    Member #
    19601
    Well I've decided to now go with the image centered on a black. Seems like it will be an easier route to go for the time being. I might try to tackle the Flash option at some point in the future, but for now I'd like to just get a working site.

    I can get an image to center in IE, but not Firefox. Do you have any tips for that?

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Pat,
    It's best if you give us the URL so we can see it in several browsers.


  6. #5
    Junior Member
    Join Date
    Aug 2009
    Posts
    4
    Member #
    19601

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You must have fixed it, because it's centered on both FF and IE (on my PC).


  8. #7
    Junior Member
    Join Date
    Aug 2009
    Posts
    4
    Member #
    19601
    Forgot to up date you, sorry. After much messing around I did get it.
    Thank you very much for your help!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com