Background image cover entire background w/one image

[oxicottin]

Hello, I cant figure out what CSS to use in my stylesheet under the body section to get a image to cover the entire background. I don't want 1 image "background-repeat:no-repeat" and I don't want several images using " background-repeat:repeat". What would I use to get the image to cover the background no matter what size?

Thanks!

[Kim]

As in, you want the image to stretch and shrink?

[oxicottin]

Stretch with different sized windows.

[gjh42]

Unfortunately, that's not possible. Background images are the size they are (in pixels) and do not stretch.

[oxicottin]

I found some examples that it is working on websites but I don't know where to start?

Example 1

Example 2

Thanks!

[Kim]

Them implement the stuff in the tutorial ...

[oxicottin]

Ok, I got it to work somewhat. My image is on top of my web site instead of in the background But it stretches. Here is what I did....
I added a div in the body of my tpl_main_page.php

<div id="bg"><img src="includes/templates/Primitive/images/TestImage.gif" width="100%" height="100%" alt=""></div>

and then I added

#bg {position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%;

to my stylesheet.css. What am I doing wrong?

[oxicottin]

Any ideas? Thanks!

[gjh42]

Any positioned element will display on top of non-positioned elements. You need to position the rest of the page content, the way the example does with the "content" div. You would probably want to make #mainWrapper position: relative; and z-index: 1; like the example.

You don't say where you added your new div; it needs to be outside of the #mainWrapper div.

[lacktorium]

for any one that stumbles across this as i did, the css for it is now.

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 65.5%;
	color: #000000;
	background-color: #e5edf5;
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
	}