css problem - my background-image won't show

[Kathy_]

Hi. I am trying to massage zen cart to look like the website it is attached to. To that end, I am trying to use the same image as the background. The only chnage I have made to stylesheet.CSS is to add it here:

body
{
background-image:url(images/showground.JPG);
margin:0;
}

I have browsed to add the file from my hard drive, so it does exist, but it will not show up. Any tips much appreciated.

Kathy

mossvaleshow . com. au / zen

[nigelt74]

Ok, where exactly have you put the image
Because this is where it is looking for it

http://www.mossvaleshow.com.au/zen/i...showground.JPG

Try using this instead

background-image: url("/images/showground.JPG");

This will get the image out of your images folder in the root directory, and yes I have tested it in Dragofly and it works

[Kathy_]

nigel, you DO rock. your suggested inverted commas idea didn't work for me, but i did have the image in completely the wrong spot, as you could see. so, i put the image in the proper spot and now it's there. awesome, as my children would say.

thanks

[CultureClick]

I'm so glad you asked this question! I'm trying to do that right now with one of my sites. Let's see how it works...

[CultureClick]

Not so good.

Here's the code in my stylesheet:

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


I also tried it this way, without the quotes:

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

and

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

The image itself, daylily01_tile.jpg, is in BOTH the includes/templates/(myflavor)/images/ folder and the public_html/images folder.

But if I do this:

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

I get my nice rich orange color background. Soooo what am I doing wrong?

Thanks!

CultureClick

[nigelt74]

Ok a link would help, infact links are essential with css problems as there can be dozens of factors inherited from further up the css ladder that cause issues.

anyway, its not the quotes that make the difference,

Kathys image was originally in her public_html/images folder (aka the root images folder)


so this wouldn't find it
background-image:url("images/daylily01_tile.jpg");

what will find it is this
background-image:url("/images/daylily01_tile.jpg");

note the forward slash before the images folder, this tells it to start looking from the root folder (public_html)

If you want to reference your templates images folder

Then you would need to do this

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

What the ../ means is go down one level from where it currently is (in this case the CSS folder of your template) so it ends up in your template folder and then the next part images/ says go up to the image folder (the images folder in your template obviously) and the last bit obviously grabs the image

[CultureClick]

WHOA PAPA!

It works! It's gorgeous! The image tiles, by the way, just in case anyone is wondering, you don't have to tell it to tile.

Nigel, like Kathy said - you DO rock!

[nigelt74]

Yep, images tile by default and good to hear you got it sorted