CSS image not displaying

**strelitzia** · 22 Jul 2011, 07:16 PM

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

**gjh42** · 22 Jul 2011, 07:27 PM

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

**strelitzia** · 23 Jul 2011, 02:09 PM

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.

**gjh42** · 23 Jul 2011, 03:05 PM

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.

**strelitzia** · 23 Jul 2011, 11:10 PM

Definately not displaying.

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

**gjh42** · 23 Jul 2011, 11:27 PM

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.

**strelitzia** · 24 Jul 2011, 01:04 PM

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.

**meshgraphics** · 24 Jul 2011, 02:43 PM

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

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

**gjh42** · 24 Jul 2011, 04:48 PM

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.

**abcisme** · 3 Aug 2011, 02:32 PM

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?

Thread: CSS image not displaying

Thread Tools

Search Thread

Display

CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Re: CSS image not displaying

Similar Threads

v155 Font/CSS Not displaying properly

v150 css hyperlinks not displaying as I intended

IE not displaying sidebar CSS properly

css buttons not displaying

CSS not displaying

Posting Permissions