Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Big background image at the correct size

Discussion in 'Website Design Forum:' started by wac, Jun 20, 2011.

  1. wac

    wac Senior Member

    I'm currently working on a new site which will use a large background image and I wish to know if it is possible to:

    A: Detect the resolution of the users screen and display an appropriately scaled image accordingly


    B: Scale the image using code at the expense of a big of resolution.

  2. mrp2049

    mrp2049 Senior Member

  3. Kevin

    Kevin Senior Member

    If your image is sufficiently large, some upscaling won't hurt it too much. If you're really set on having crisp background images though then I think there really is only one way: extremely large images.

    With media-queries now you could detect screen sizes and serve up a different image to minimize the effects of up or downscaling.
  4. wac

    wac Senior Member

    Mrp2049: a handy link, Im starting to think that that may be the best way forward.

    Kevin: that is the kind of thing is was looking for but can you give me any insight into the method? Its a tricky thing to phrase on Google.
  5. Kevin

    Kevin Senior Member

    Well it works by serving different css styles depending on a few rules.

    <link rel="stylesheet" href="style.css" media="screen" /> 
    <link rel="stylesheet" href='wide.css' media="screen and (min-width: 1280px)" /> 
    <link rel="stylesheet" href='narrow.css' media="screen and (max-width: 620px)" /> 
    So in your style.css all your styling would take place, including your background image for "normal" screens.
    body {  background: url(images/background.jpg) top left;  background-size: cover; /* this should stretch your background in modern browsers */  (....)}
    In the wide.css you would just change the url of your background image to a larger version, perhaps with elements aligned differently. Even if you just sized it up yourself, it's undoubtedly better than the css/html resizing.
    body {  background: url(images/muchwider.jpg) top left;}
    And vice-versa for narrow.css
    body {  background: url(images/naaaarrow.jpg) top left;}
  6. Sunburn

    Sunburn Active Member

  7. wac

    wac Senior Member

    Thanks chaps, I've got a test site up and running and it seems to be working!

Share This Page