WEB I want this background to automatically resize depending on a users resolution...

Discussion in 'OT Technology' started by Browning, Oct 1, 2009.

  1. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,463
    Likes Received:
    10
    But am lost:o

    Code:
    body {
            background: url(images/default.jpg) no-repeat 0 0 #fff;
            background-attachment:fixed;
            color: #000;
            font-family: Arial, Verdana, sans-serif;
            margin: 0;
            padding: 0;
    }
    
    pic is 1600x993 which works out well on my pc but looks like shit with other resolutions:mamoru:
     
  2. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
  3. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,463
    Likes Received:
    10
    :rofl::o
     
  4. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    dynamically load based on resolution. basic javascript.
     
  5. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,463
    Likes Received:
    10

    would it be easy to do on a wordpress site?
     
  6. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,296
    Likes Received:
    493
    Location:
    L.A.
  7. Boomhauer

    Boomhauer New Member

    Joined:
    Aug 22, 2006
    Messages:
    2,871
    Likes Received:
    0
    Location:
    Ann Arbor
    You can't do it with pure CSS right now. It will be possible with CSS3 with a very simple tag:
    Code:
    background-size: 100%;
    But right now you'll have to --
    Code:
    <div id="background">
        <img src="img.jpg" class="stretch" alt="" />
    </div>
    And use this CSS --
    Code:
    #background {
        width: 100%; 
        height: 100%; 
        position: absolute; 
        left: 0px; 
        top: 0px; 
        z-index: 0;
    }
    
    .stretch {
        width:100%;
        height:100%;
    }
     
  8. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,651
    Likes Received:
    15
    Location:
    Atlanta
    You can use javascript to find a users resolution and load a certain image based off of the return. I've done it before on a site i had years ago. Is the image a repeating image, or something like a building?
     
  9. Insert Tokens

    Insert Tokens Making Cancer My Bitch OT Supporter

    Joined:
    Jan 12, 2006
    Messages:
    8,330
    Likes Received:
    76
    Location:
    Tasmania
    Problem with that is if they resize the window at all, it goes all fucked up.
     

Share This Page