Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / css problem - my background-image won't show

css problem - my background-image won't show

Views: 3,126

Results 1 to 8 of 8
17 May 2012, 4:51 AM
#1
kathy_1 avatar

kathy_1

New Zenner

Join Date:
Apr 2012
Posts:
26
Plugin Contributions:
0

css problem - my background-image won't show

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

17 May 2012, 5:03 AM
#2
nigelt74 avatar

nigelt74

Totally Zenned

Join Date:
Sep 2005
Location:
Waikato, New Zealand
Posts:
1,558
Plugin Contributions:
1

Re: css problem - my background-image won't show

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

http://www.mossvaleshow.com.au/zen/includes/templates/classic/images/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

17 May 2012, 10:45 AM
#3
kathy_1 avatar

kathy_1

New Zenner

Join Date:
Apr 2012
Posts:
26
Plugin Contributions:
0

Re: css problem - my background-image won't show

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

19 May 2012, 12:58 PM
#4
cultureclick avatar

cultureclick

New Zenner

Join Date:
May 2012
Posts:
93
Plugin Contributions:
0

Re: css problem - my background-image won't show

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

19 May 2012, 1:25 PM
#5
cultureclick avatar

cultureclick

New Zenner

Join Date:
May 2012
Posts:
93
Plugin Contributions:
0

Re: css problem - my background-image won't show

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 :D

20 May 2012, 9:28 PM
#6
nigelt74 avatar

nigelt74

Totally Zenned

Join Date:
Sep 2005
Location:
Waikato, New Zealand
Posts:
1,558
Plugin Contributions:
1

Re: css problem - my background-image won't show

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

20 May 2012, 10:33 PM
#7
cultureclick avatar

cultureclick

New Zenner

Join Date:
May 2012
Posts:
93
Plugin Contributions:
0

Re: css problem - my background-image won't show

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!

20 May 2012, 10:43 PM
#8
nigelt74 avatar

nigelt74

Totally Zenned

Join Date:
Sep 2005
Location:
Waikato, New Zealand
Posts:
1,558
Plugin Contributions:
1

Re: css problem - my background-image won't show

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