www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] code to put an image image on site so that it fills the user's screen

  1. #1
    Join Date
    Oct 2012
    Posts
    3

    resolved [RESOLVED] code to put an image image on site so that it fills the user's screen

    Hi!
    I have an image that I want to use for the background of my web site. It is 792 X 612 px and 96/in It fills the screen rather nicely on my 1440 X 900 resolution screen. If I increase the size to 1440 x 900 it is too big for smaller screens. If I modify my img tag to to display it at 100% it's just goes back to the original dimensions and does not cover the screen except at 800 x 600 screens. How can I make sure the image will fill the screen of the smallest to the largest screen resolutions?
    Thanks,
    Annis

  2. #2
    Join Date
    Oct 2012
    Posts
    4
    Try something like

    <img class="bg" src="image.jpg" alt="Image />

    And CSS like

    img.bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
    }

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    That code is broken somehow. It won't even put the image on my screen this is what I have:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta content="text/html; charset=ISO-8859-1"
     http-equiv="content-type">
      <title>RIMS</title>
      <style type="text/css">
    img.bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
      </style>
    }
    </head>
    <body>
    <img class="bg" src="cover.jpg" alt="Image">
    </body>
    </html>
    I corrected your code and put a closing quote mark after image, but it still does not work

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    100% Background Image Code:

    http://pastebin.com/M0GK5A3J
    http://css-tricks.com/perfect-full-p...kground-image/
    =======================================
    http://paynelessdesigns.pastebin.com/f3fbc9dfd
    =======================================
    http://www.cssplay.co.uk/layouts/background.html

    bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html

  5. #5
    Join Date
    Oct 2012
    Posts
    3
    Thanks for all the help, but the fix was far simpler. I enlarged the image to 1600 px in Photoshop. Using the original code I had written earlier worked fine with all screen sizes. I don't understand why I would need a JS library for something that simple? The code was:
    Code:
    <img style="width: 100%; height: 100%;" alt=""
     src="cover.jpg">
    I checked with a small notebook, a small tablet and my wife's smartphone. The image displayed correctly in all cases
    Paul

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