site resize

Discussion in 'Web Design and Development' started by Gokhan, Apr 2, 2007.

  1. Gokhan macrumors 6502a

    Joined:
    Oct 7, 2003
    Location:
    London
    #1
    hi guys

    i am creating a site in dreamweaver with a static background and links and stuff built on top of it , my problem is as the image is 800x600 when the website is viewed at a higher resolution half of the screen is blank !!

    how can i make it , so the website is 800x600 but will upsale or downscale to display correctly according to users resolution ????
     
  2. benneh macrumors member

    Joined:
    Oct 20, 2006
    #2
    i think there'll be others who will give a more accurate reply, but here are what i think your options are:

    1) use flash - not ideal, but u can re-size the background image

    2) use a higher res (or higher dimension image), then use css to put it in the background. So say you have an image that is 1600x1200. Any users with resolutions below that will see a cropped image, but at least you cover the audience using 800x600, 1024x769 or 1280x1024 resolution

    depends on the importance of your background image i guess...
     
  3. nicksoper macrumors member

    nicksoper

    Joined:
    Mar 6, 2006
    Location:
    Cape Town
    #3
    Scaling Background

    Hey Gokhan,

    This answer is based on the assumption that you have a background image of 800x600, and you want it to full up the page. I see two ways of getting around it, either:
    1) By making the background image tile or
    2) By centring the background image and fading the sides into the background color.

    For starters you should be using a stylesheet, so in there you need to have a body {} tag.
    For 1)
    body {
    background:url(images/bg.jpg) repeat-x top left;
    }
    This places the background image in the top left and repeats it from left to right/width ways. You could just have "repeat" instead of "repeat-x" and it would tile left to right, and top to bottom.

    For 2)
    body {
    background:url(images/bg-gradient.jpg) no-repeat top centre;
    background-color:#000;
    }
    This would place the background image in the top centre, and not tile the background image.
    Then what you could do is make the background black, and put a gradient in the background image to black, so it fades in and doesn't look as bad.

    If you think about it though, most people are running 1024x768, and more and more people are using larger widescreen displays, so a non tiling background can make your site look bad for those on bigger monitors.
     
  4. Gokhan thread starter macrumors 6502a

    Joined:
    Oct 7, 2003
    Location:
    London
    #4
    k

    hi guys thanks for your help


    basicly i have the background image at 1280x800
    the site is the backgound with the links and content built on top of it here is a picture of the background


    so if you think in photoshop layers - background- content in the middle - and navigation on the right


    so suppose if i design the site for 1280x800 then it will fill up the browser on lower resolutions and maybe suffer the odd overstrech on higher ones ??

    and yes i am using style sheets - no repeat ,body tag


    thanks
     

Share This Page