Background image cover entire background w/one image

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!

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

Stretch with different sized windows.

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

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

Example 1

Example 2

Thanks!

Them implement the stuff in the tutorial ...

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```

Any ideas? Thanks!

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.

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

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

thx for the code but i don;t get what they are saying up there about the <div>, any help?

You need to follow the instructions given on the site the example comes from (post 5). This means not making the "background" an actual CSS background-image, but an <img> in a new div.
I don't know what the recent style rule posting was about, as it would not make an image stretch to fit the window.

You can also put it after html and streamline the code by doing it this way```
html {
margin: 0;
padding: 0;
background: url(location_of_image.jpg) no-repeat center center fixed;

Here is a great tutorial. http://css-tricks.com/perfect-full-page-background-image/ You don't need to worry about div's just use that tutorial, and it should work no problem.

KaosChris:

Here is a great tutorial. http://css-tricks.com/perfect-full-page-background-image/ You don't need to worry about div's just use that tutorial, and it should work no problem.

nice tutorial, like the JavaScript.

:clap: fantastic help thank you

My problems are always so fundamental: In the following:

background-image: url(../images/background.jpg);

What actually goes in the area before " /images..."

My site is at:

http://creativesimplicitywebdesign.com/shop/

and my background image is just in that directory, in no particular file folder. I'll call my background image "backer.jpg". what now?

You need to put your background image in /shop/includes/templates/your_template/images/backer.jpg.
Then the (../images/etc) will point exactly to the image location without further ado.

This is how i got the background image to work in zencart 1.3.9h at my website All Paintball Supplies:

upload background image called background.jpg to: /yourshop/images

Then implement this code in your stylesheet.css for me found /yourshop/includes/templates/classic/css/ right before the current body:

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

NEXT, you need to comment out your current body code like this:

/*body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}

*/

Next all i need to do is make an image that fills in the left and right sides with what i actually want people to see and isn't 4megs big...lol

If anyone can figure out how to have this image span across the header and footer that would be splendiforous!