www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image scaling problem

  1. #1
    Join Date
    Mar 2007
    Posts
    2

    Image scaling problem

    Hi I'm a relatively amateur designer and coder and I've run into a problem. I have a background gradient for a splash page I am in the middle of creating and I can't figure out how to scale it properly. Obviously users will be on different resolutions and I want to gradient to take up 100% of every users screen regardless of resolution, no more no less. I have no problem with the horizontal dimension but the vertical will always stretch the page and add a scroll bar.

    All I need is a simple page with no scrolling the adapts to a viewers resolution and the gradients is always perfectly 100% in the viewport. I don't know if I'm making any sense but any help is very much appreciated.

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The best thing to do is have the gradient nearly as long as the normal height and also set a background color that matches the bottom (or top) edge color. I.e. fudge it.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  3. #3
    Join Date
    Mar 2007
    Posts
    2
    yea that's the solution i know how but i was hoping there was a better more practical way.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by SpecOps578
    ... but the vertical will always stretch the page and add a scroll bar. ...
    Huh? If it is a "background-image", it should not be creating a scrollbar. If the image exceeds the height of the page, the background-image is merely 'cut off' at that point... Am I missing something?
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles