Image Background not displaying

**rebelman** · 30 Jun 2012, 04:21 PM

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 www.nameyourgift.ie you will notice the background does not include the "gradientbar" image. However in my stylesheet I have coded the following:

Code:

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

**lat9** · 30 Jun 2012, 07:20 PM

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?

**schoolboy** · 30 Jun 2012, 07:27 PM

Turn off MINIFY and see what happens...

**rebelman** · 1 Jul 2012, 11:36 AM

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?

**lat9** · 1 Jul 2012, 12:17 PM

It's not another stylesheet; submitting the CSS for your site to the w3 validator (http://jigsaw.w3.org/css-validator/v...yourgift.ie%2F) results in complaints about the background-image statement in your stylesheet.css file.

**rstevenson** · 1 Jul 2012, 01:12 PM

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

Code:

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;
}

**rebelman** · 1 Jul 2012, 01:17 PM

Originally Posted by lat9

It's not another stylesheet; submitting the CSS for your site to the w3 validator (http://jigsaw.w3.org/css-validator/v...yourgift.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?

**rebelman** · 2 Jul 2012, 12:08 PM

Originally Posted by 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

Code:

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?

**rebelman** · 2 Jul 2012, 01:08 PM

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.

**hyesubba** · 19 Jun 2014, 04:57 AM

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.

Thread: Image Background not displaying

Thread Tools

Search Thread

Display

Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Re: Image Background not displaying

Similar Threads

Background Image Not Displaying

Page not displaying background.

background image not displaying

Background Images for Sidebox Headers Not displaying In IE.

Background image not displaying

Bookmarks

Bookmarks

Posting Permissions