Image Background not displaying

30 Jun 2012, 3:21 PM

#1

New Zenner

Join Date:: Nov 2010
Posts:: 53
Plugin Contributions:: 0

Image Background not displaying

Hi,

I am using Alysa Rounded template and have changed the background image by adding a new color code and a gradient image. However, the gradient image doesn't get displayed.

Example: If you go to my home page https://www.nameyourgift.ie you will notice the background does not include the "gradientbar" image. However in my stylesheet I have coded the following:

body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size:62.5%;color: #888787; background-image: url
(../images/gradientbar.png);  background-repeat:repeat-x; background-color: #e8f2f3;}

I have the exact same code on my test site and it works fine - see here http://test.nameyourgift.ie/zencart/test/.

This was working previously on my 'live' site so I am thinking there must be a conflict with perhaps another add-on thats causing the image not to be displayed.

I would appreciate if anyone can help.

Many thanks

30 Jun 2012, 6:20 PM

#2

lat9

Administrator

Join Date:: Sep 2009
Location:: Stuart, FL
Posts:: 14,080
Plugin Contributions:: 56

Re: Image Background not displaying

Looking at your page's <body> styling using FireFox's FireBug add-on, there is no such styling defined for the body tag. Are you sure you're editing the right stylesheet.css and then uploading the file to your website's file directory?

30 Jun 2012, 6:27 PM

#3

schoolboy

Totally Zenned

Join Date:: Jun 2005
Location:: Cumbria, UK
Posts:: 10,327
Plugin Contributions:: 0

Re: Image Background not displaying

Turn off MINIFY and see what happens...

1 Jul 2012, 10:36 AM

#4

rebelman

New Zenner

Join Date:: Nov 2010
Posts:: 53
Plugin Contributions:: 0

Re: Image Background not displaying

Switching off Minify made no difference. When I inspect element with Chrome it shows the background image path but reports an error 'Invalid Property Value'. What does this mean? The image is definitely uploaded to the correct directory (i.e. the templates images folder). Just wondering if another stylesheet is over-riding my main stylesheet? Any other suggestions?

1 Jul 2012, 11:17 AM

#5

lat9

Administrator

Join Date:: Sep 2009
Location:: Stuart, FL
Posts:: 14,080
Plugin Contributions:: 56

Re: Image Background not displaying

It's not another stylesheet; submitting the CSS for your site to the w3 validator (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.nameyourgift.ie%2F) results in complaints about the background-image statement in your stylesheet.css file.

1 Jul 2012, 12:12 PM

#6

rstevenson

Totally Zenned

Join Date:: Nov 2006
Location:: Dartmouth, NS Canada
Posts:: 2,400
Plugin Contributions:: 0

Re: Image Background not displaying

It's very subtle. Just remove the space character between 'url' and '('. Then the CSS validates, and perhaps the background will appear. I pasted the working body declaration below. (I find it's easier to read the CSS if it's formatted, and the spaces, lines and tabs added to do so do not slow down the load time for modern browsers over modern networks -- YMMV.)

Rob

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #888787;
	background-image: url(../images/gradientbar.png);
	background-repeat: repeat-x;
	background-color: #E8F2F3;
}

1 Jul 2012, 12:17 PM

#7

rebelman

New Zenner

Join Date:: Nov 2010
Posts:: 53
Plugin Contributions:: 0

Re: Image Background not displaying

lat9:

It's not another stylesheet; submitting the CSS for your site to the w3 validator (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.nameyourgift.ie%2F) results in complaints about the background-image statement in your stylesheet.css file.

But why is there no error on my test site http://test.nameyourgift.ie/zencart/test/
The background syntax in my test stylesheet is the same?

2 Jul 2012, 11:08 AM

#8

rebelman

New Zenner

Join Date:: Nov 2010
Posts:: 53
Plugin Contributions:: 0

Re: Image Background not displaying

rstevenson:

It's very subtle. Just remove the space character between 'url' and '('. Then the CSS validates, and perhaps the background will appear. I pasted the working body declaration below. (I find it's easier to read the CSS if it's formatted, and the spaces, lines and tabs added to do so do not slow down the load time for modern browsers over modern networks -- YMMV.)

Rob

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #888787;
background-image: url(../images/gradientbar.png);
background-repeat: repeat-x;
background-color: #E8F2F3;
}


There was already no space between 'url' and the image path.  The body css is defined exactly the same in my test stylesheet (and works fine) so I am not sure what else I can do to get the background displayed!  Any other ideas?

2 Jul 2012, 12:08 PM

#9

rebelman

New Zenner

Join Date:: Nov 2010
Posts:: 53
Plugin Contributions:: 0

Re: Image Background not displaying

Ok, I have resolved the problem. It seems switching off minify was the answer....It seems this didn't work originally but after I cleared my browser cache the background is now been displayed. Thanks for all your help, very much appreciated.

19 Jun 2014, 3:57 AM

#10

hyesubba

New Zenner

Join Date:: Jun 2014
Location:: India
Posts:: 1
Plugin Contributions:: 0

Re: Image Background not displaying

I got this problem of invalid property value while doing on wordpress and the suggestion Rob gave about removing space between url and ( helped me resolve a problem I was struggling from 2 days. Just wanted to say thanks.