Body Backgound Size?

[stbede77]

I have been playing around with a background image but haven’t figured out how to make it so the image will resize with the page. The following code is in my style sheet.

body {
background-image: url('../images/background.jpg');
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;

}

Any ideas on how to set the width and height of the background.jpg to 100%?

[DrByte]

I'm not sure about resizing, but perhaps the "background-attachment" property may be helpful:

http://www.w3schools.com/css/css_reference.asp

[stbede77]

Thanks for the info but background-attachment doesn't really achieve the desired affect of what I was looking for... In basic html you can normally do background="image url" width=100% height=100%... where can this be done in zen cart?

[Tykies]

hmm.. so if I understand correctly, you want for your background image to stretch with the page instead of repeating?

Can you post a link to your shop so I can try and understand better?

[Pauls]

From the site posted by DrByte

<style type="text/css">
body
{ 
background-image: 
url('your_tiled_background.jpg');
background-repeat: repeat;
}
</style>

This will tile your image horizontally, filling the background (100%) which is equivalent to your HTML request

If you only want one image set as background and no repeating (tiling) then set

background-repeat: repeat; to background-repeat: no-repeat;

[ladysaat]

hmm.. so if I understand correctly, you want for your background image to stretch with the page instead of repeating?

Can you post a link to your shop so I can try and understand better?

ahhhhhhh me too!! I need to do exact same thing. When I have it as no repeat I have white areas around it. I need it to stretch. I could swear that you just put that in the code, but then again I don't know much here.

[ladysaat]

Okay in my stylesheet in the template I'm using I input this:

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
*/

body { {margin: 0px}; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #333; background-color: #fff; background-image: url(../images/tile_back.jpg); background-repeat: no-repeat; }

#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}


I honestly have no idea if all the junk I put in is necessary (the {margin: 0px} I think is good, the other #bg_image crap I don't think so) but on my template now I have a stretched non repeated image. Someone let me know if I just posted utter nonsense okay??

[urbanfarmer]

i don't know if this will help you at all but...

you will get errors if you put { } inside of eachother.
validate your css:
http://jigsaw.w3.org/css-validator/

as far as making the image resize with the page, i have never seen that.
have you? if you have, you can find out how it was done in the sites stylesheet or possibly javascript.

#bg_image with this you are referencing a <div> and it won't be applied if don't have your image in that div as far as i know.

this is what i have in mine. i like the fixed attachment because the image doesn't scroll with the page.

body {background-image: url(../images/tile_back.jpg);background-attachment: fixed; height: 110%; width: 100%; background-repeat:no-repeat;margin: 0;}

sometimes 100% won't fill the browser window for reasons unknown to me. you may need to mess around with the image size.

[urbanfarmer]

ok, i found this and it seems to work for resizing the bg

body {background-image: url(../images/tile_back.jpg);background-attachment: fixed;background-position: top center; background-repeat:no-repeat;margin: 0;}

[ladysaat]

WIERD! I have no errors and that's what is currently in the style sheet.

Would someone look at my cart on their computer??? Maybe the errors will show up for you? www.houseofdiva.com/zencart

ETA: When I click on my CSS things to edit them, my Adobe Golive software comes up as the editor. Would that highlight or tell me when there is invalid code?