Stretching a background image with css

I need help putting a background image on a  a web page.   This seems like an impossible task.

Here are the requirements.  

1.  Must be done with CSS.   no <img> tags.
2.  Must show the entire image.  i.e. The 4 corners of image must be pinned to the 4 corners of the browser.
3.  Image Must not wrap.

The following code snippet chopps off the top 1/2 of the image.  

How do I pin and stretch the background image to all 4 corners of the page without wrapping?

/* why does this snippet chop off part of the background image?*/ 
body {
            background: fixed center center url(/images/bg.jpg) #000;
            margin: 0;
            padding: 0;
            width: 100%;
            -o-background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            background-size: cover;
    }

Open in new window

tmonteitAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Only with CSS3 compatible browsers and some client script to detect the window size and change the normal proportions of the image.
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style type="text/css" title="text/css" media="screen">
* {margin:0 auto;padding:0}
body {
      background: fixed center center url(154.jpg) #000;
      margin: 0;
      padding: 0;
      -o-background-size: 800px 600px;
      -moz-background-size: 800px 600px;
      -webkit-background-size: 800px 600px;
      background-size: 800px 600px;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $('body').css('background-size', w + 'px ' + h + 'px' );
}
 </script>
</head>
<body>
</body>
</html>

Open in new window

0
 
COBOLdinosaurCommented:
Its not going to happen.  Even with those hacks it is not going to happen.  How do you intend to deal with old browsers that don't understand the hacks?  Without the hacks you have no way of dealing with differences in size, and because it is a background image I don't think scripting can save you either.


Cd&
0
 
tmonteitAuthor Commented:
So happy that someone found a way to accomplish this!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.