CSS image not displaying

22 Jul 2011, 6:16 PM

#1

Totally Zenned

Join Date:: Nov 2005
Location:: France
Posts:: 588
Plugin Contributions:: 1

CSS image not displaying

I'm having problems with a new template i'm trying to create.
I can't get background images to display that are called in the stylesheet.

CSS is:

#wrapper{

background-image:url(../images/xmas_window_bg_top.jpg) left top no-repeat #f5f5f6;	

background-color:transparent;

text-align:center;

}

Any suggestions why it doesn't display?

Regards
Steve

22 Jul 2011, 6:27 PM

#2

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: CSS image not displaying

Where is xmas_window_bg_top.jpg located? Seeing your site live would make it easier for us to advise you.

23 Jul 2011, 1:09 PM

#3

strelitzia

Totally Zenned

Join Date:: Nov 2005
Location:: France
Posts:: 588
Plugin Contributions:: 1

Re: CSS image not displaying

the image file is located in includes/templates/xmas_shop/images.

site is only on a local testing server at the moment so i can't show it live.

23 Jul 2011, 2:05 PM

#4

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: CSS image not displaying

Are you sure the bg image is not displaying? "#wrapper" sounds like an element that will be filled with other elements, and if those have background colors, they will block the wrapper bg.

23 Jul 2011, 10:10 PM

#5

strelitzia

Totally Zenned

Join Date:: Nov 2005
Location:: France
Posts:: 588
Plugin Contributions:: 1

Re: CSS image not displaying

Definately not displaying.

I removed the entire stylesheet apart from the section that calls the image and it still doesn't display.

23 Jul 2011, 10:27 PM

#6

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: CSS image not displaying

Reading the rule you posted more closely, the problem is obvious: you are using the property declarations wrong.
background-image: can only take a url for a value; all other values need to be in other background- properties, or else use the shorthand property background:

#wrapper{
background-image:url(../images/xmas_window_bg_top.jpg) left top no-repeat #f5f5f6;
background-color:transparent;
text-align:center;
}
#wrapper{
background:url(../images/xmas_window_bg_top.jpg) left top no-repeat #f5f5f6;
text-align:center;
}

If you want the bg transparent, remove the #f5f5f6 and it will default to transparent.

24 Jul 2011, 12:04 PM

#7

strelitzia

Totally Zenned

Join Date:: Nov 2005
Location:: France
Posts:: 588
Plugin Contributions:: 1

Re: CSS image not displaying

Thanks for the input on the CSS.

Sadly, tried that and still no background image.

I'm confused as to what is going on here.

I tried making a blank stylesheet with just the background info and it still will not display.

24 Jul 2011, 1:43 PM

#8

meshgraphics

New Zenner

Join Date:: Mar 2008
Location:: Ontario
Posts:: 42
Plugin Contributions:: 0

Re: CSS image not displaying

What is the absolute url of the image?
What does the page think it is?

#wrapper{
background:url(../images/xmas_window_bg_top.jpg)
}

24 Jul 2011, 3:48 PM

#9

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: CSS image not displaying

According to post 3, the image is in the right folder (assuming the current template folder is /xmas_shop/).

Post a snippet of your view source, starting with <body and continuing 20 lines or so past the line with id="wrapper".
Then post any stylesheet rules that refer to elements mentioned in the source snippet. That may give us something to go on. (The whole source and stylesheet would be hard to wade through unless absolutely necessary.) #wrapper is not a standard id, so indicates some customization.

3 Aug 2011, 1:32 PM

#10

abcisme

Zen Follower

Join Date:: Jun 2006
Posts:: 298
Plugin Contributions:: 0

Re: CSS image not displaying

This just started happening on my template as well. It was working fine up until now and I haven't made any changes to my css in months.

Did anyone ever come up with a solution?

3 Aug 2011, 1:45 PM

#11

abcisme

Zen Follower

Join Date:: Jun 2006
Posts:: 298
Plugin Contributions:: 0

Re: CSS image not displaying

I figured out what my problem was. I removed the width:100% from my body tag and changed the margin from auto to 0 and the background showed up. Doesn't look like that is the OP's problem, but thought I'd share what fixed my issue in case anyone else comes across this problem. Strange that it just started happening now though!