css3 cover,CSS3 background-size: cover doesn't make image

Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.

Would either of these examples work?

HTML

CSS

html {

background: url(images/bodyBackground1.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

body {

background:#fff;

margin: 0;

padding: 0;

overflow:hidden;

}

html, body {

height: 100%;

}

img.bg {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px; /* 50% */

}

}

Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:

PHP load function

$bg_images = array(

0 => 'comp1.png',

1 => 'comp2.png',

2 => 'comp3.png',

....

);

$image = $bg_images[ rand(0,(count($bg_images)-1)) ];

$showBG = "";

?>

HTML

...

...

CSS

html, body {

margin:0;

height:100%;

}

img.source-image {

width:100%;

position:absolute;

top:0;

left:0;

z-index:0;

min-width:1024px;

}

These options should fill up the browser window according to the height and width.