SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Trouble

    What I want to try to do is create a background image on my website. I have a screen resolution of 1280x1024. My background image is the same size. What I want to craete is a background on my website that has no scrolling on my resolution. Meaning the background image fits to the size of my screen without any scrolling or stretching of the image.
    ]

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your MAX screen resolution is 1280x1024, but you have to remember that the browser's viewport is not 1280x1024. You can take a screenshot and try measuring the viewport. Use the size from the measurement and resize the image. Then just set a background on the body or html element and specify "no-repeat".

    If you modify your browser's size (not full screen) then you won't be able to view the full image.

    body { background:url(images/background.jpg) no-repeat; }
    I hope this is a personal site primarily used by yourself, because the image will either be too large if the user's resolution is less than 1280x1024 or small if it's larger then that.
    Last edited by SoulScratch; Nov 17, 2007 at 23:45.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mind if I get scrolling, however my background image is about 1280x1024 so how can I create this . thanks.
    ]

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a screenshot and measure your viewport. Then resize the picture. If you don't want scrollbars then try html { overflow:hidden; }

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to implement this into my html page.

    Where would I place that snippet of code
    ]

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. It's not going to fully fit, but whatever.

    In your HTML Page..

    <style type="text/css" media="screen">
    html { background:url(images/background.jpg) no-repeat; }
    </style>
    That goes in the <head> of your HTML.


Bookmarks

Posting Permissions

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