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

**a3nnis** · 10-04-2012 04:31 PM

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

**geebzor** · 10-04-2012 06:48 PM

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%;
}

**a3nnis** · 10-05-2012 10:27 AM

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

**Major Payne** · 10-05-2012 02:08 PM

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

**a3nnis** · 10-05-2012 06:39 PM

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: [RESOLVED] code to put an image image on site so that it fills the user's screen

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions