Forums / Templates, Stylesheets, Page Layout / Css: Bg image won't change!

Css: Bg image won't change!

Views: 1,335

Results 1 to 9 of 9
9 Mar 2012, 3:08 PM
#1
sabastina avatar

sabastina

New Zenner

Join Date:
Nov 2005
Posts:
72
Plugin Contributions:
0

Css: Bg image won't change!

Greetings, hope you are doing well today.:D

Obviously I am working on my store design using the css. I have done this on earlier versions of ZC with no problems, but it's just not working this time and I can't figure out why.
I'm trying to load an image for use in the foreground.
I am using FF with the Web Developer>CSS>Edit CSS

The code piece I am having trouble with is this:

/*wrappers - page or section containers*/
#mainWrapper {
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	text-align: left;
	width: 950px;
	vertical-align: top;
	border: 1px solid #9a9a9a;
	}

I can not for the life of me figure it out.
Site is at http://shop.sabbykatdesigns.com

Thanks very much for reading, and any help would be fantastic!

9 Mar 2012, 3:25 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Css: Bg image won't change!

The image you're specifying is FG1.gif - is that image actually in includes/templates/classic/images ?

BTW, you should create your custom template before you go any further.

https://www.zen-cart.com/tutorials/index.php?article=142

9 Mar 2012, 3:34 PM
#3
sabastina avatar

sabastina

New Zenner

Join Date:
Nov 2005
Posts:
72
Plugin Contributions:
0

Re: Css: Bg image won't change!

Stevesh,

Thanks for the help, I'm going to read that link and set that up as soon as I send this post.

Yes, the FG1.gif is in the classic folder. This is what has me so confused.

I installed firebug and checked it out with that. It shows the HTML window on the bottom left. Yes, well...when I hover over the piece of code it showed, it displayed a tiled FG1.gif image across and OVER the entire screen! Then, when I moved the mouse slightly, it refit that image into (well, over) the space where it is supposed to be...but moving the mouse from the HTML code in that panel makes it go away.

I'm not sure what the firebug is trying to tell me.:frusty:

Thank you again for the help here...I really appreciate you and your time.

9 Mar 2012, 4:11 PM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Css: Bg image won't change!

It works on my test site (https://www.stevesh.org/demo). Try actually changing that rule in the stylesheet rather than using Firebug. When you place images using the stylesheet, you usually can't see them in Firebug or Web Developer, since those programs don't know where the images are, path-wise.

9 Mar 2012, 4:46 PM
#5
sabastina avatar

sabastina

New Zenner

Join Date:
Nov 2005
Posts:
72
Plugin Contributions:
0

Re: Css: Bg image won't change!

Yeah, it's working like a charm on your site! I just don't understand this.

I set up the Overrides system as directed (thanks so much, I doubt I would have done it otherwise because I am terrified of completely destroying my site, I'm also going to set up a test site for the future!)

OK, I can NOT get this file to work! I edited it in notepad (the only editor I have atm) and uploaded it fresh...still nothing!

I thought maybe the filename was too short for the image, but then when you got it working, it ruled that out...

I'd add the style sheet here, but you can already see that from your end...I just don't know what to do. I mean, why would the code work on yours, but not on mine? Kinda rules out an errors on the stylesheet doesn't it?

OT: I noticed you're from Lansing, what's the weather like down there? We've been getting tons of wind up here ever since that solar storm hit the other day. And the rivers are flooding here too. (I'm up in Gladwin by Mt. Pleasant)

9 Mar 2012, 5:00 PM
#6
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Css: Bg image won't change!

The only difference I can see between the two is my #mainWrapper rule includes this: background-color: #ffffff;.

It's sunny and cold today. It's been really windy for the last four days or so, but it was pretty warm Wednesday and Thursday. Winter was pretty mild this year, but I'm ready for spring.

9 Mar 2012, 5:43 PM
#7
sabastina avatar

sabastina

New Zenner

Join Date:
Nov 2005
Posts:
72
Plugin Contributions:
0

Re: Css: Bg image won't change!

hmmm...I just added that snippet you posted (before the rest of the Background css there in the main wrapper) and at least I got a result...it made that area white...

I am completely confused about this issue.

the image works on your site...
the color as a background works on my site...
The image on my server is good because you used it...

Sigh...Think I'm going to check css out over at w3schools to see if I'm missing something...but then, it worked on YOUR page...arggggg!

9 Mar 2012, 5:47 PM
#8
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Css: Bg image won't change!

You have a dot at the end of that background-color element that shouldn't be there.

9 Mar 2012, 6:04 PM
#9
sabastina avatar

sabastina

New Zenner

Join Date:
Nov 2005
Posts:
72
Plugin Contributions:
0

Re: Css: Bg image won't change!

Thanks...got it!

Ok, I had followed the instructions on the W3schools site when placing the color element. They say that color must come first, but it doesn't...it comes AFTER the repeat element.

Now, I gotta figure out why the OUTSIDE background won't show up...lol and ummm...how to get all my sideboxes on in my new template...heh! MY new template...it kinda is mine this time! Nice.

Thanks SO MUCH for your time with this problem.

GOT IT!!! WOOOWHOOO!!!