www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image resisze in different resolutions

  1. #1
    Join Date
    Nov 2008
    Location
    Wiltshire, England
    Posts
    108

    Image resisze in different resolutions

    Ok, i have 2 navigation bars that i'm screating and both of them have a kind of graident so it looks like it's kind of split in half (top half lighter than bottom). The problem is when i change the resolution and view the website the image looks like its moved but of course the screen can't display all of it because i've set the heigh to 5%.

    How can i get it so that it will display all of the image no matter what? Or does anyone have a solution to fix this proble.

    Here's some css that i use on the bars

    Code:
    #nav-1 {
      position: absolute;
      top: 15%;
      width: 100%;
      height: 5%;
      background-image: url("Nav-bar-1.gif");
      background-repeat: repeat-x;
    }
    
    #nav-2 {
      position: absolute;
      top: 20%;
      width: 100%;
      height: 5%;
      background-image: url("Nav-bar-2.gif");
      background-repeat: repeat-x;
    }

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Try using a fix value for style.

  3. #3
    Join Date
    Nov 2008
    Location
    Wiltshire, England
    Posts
    108
    Quote Originally Posted by Major Payne View Post
    Try using a fix value for style.
    You mean actual fixed positioning or replacing the %?

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Sorry. Should have been clearer. Set the height in a fix unit that you want like 30px. Using percents for different resolutions means it will be different for each. If you can live with the width changes, then the image height needs to stay fixed in all resolutions.

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