Problem displaying background image with CSS

**Pedro Monteiro** · Sep 11, 2004, 20:16

I'm having an odd problem displaying a background image through a style sheet. It seems to be working fine with regular HTML, but when I try deffine the background in the CSS, for some reason it quite simply doesn't show. Also, the height andf width attributtes aren't being set up properly bu the style sheet.

With CSS
http://www.ajudademae.com/test.php

Without CSS
http://www.ajudademae.com/test2.php

Code:

tabr{
 height: 187px;
 width: 227px;
 BACKGROUND-IMAGE:  url(http://www.ajudademae.com/images/logo2.gif);
}

Any clue why this is happening?

**Fotinakis** · Sep 11, 2004, 20:52

That should work, I don't know why it's not.

Like all the rest of your "background-image" attributes, change this one to be:

BACKGROUND-IMAGE: url(../images/logo2.gif);

That's the only thing I can see different from the rest of them that might be causing the error (but, the original code should be working. I even tried it on a style sheet of mine and it worked fine.)

Also, see here:
http://jigsaw.w3.org/css-validator/v...e.com/test.php

**deronsizemore** · Sep 11, 2004, 21:14

Try it like this...

background: url(images/logo2.gif) left top ;

**Pedro Monteiro** · Sep 12, 2004, 16:50

Mmm this is very strange. Now I can't seem to get the background image working in the <body> tag. I have worked with CSS for quite some time, and this has never happened to me.
http://www.ajudademae.com/

Code:

BODY {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 text-decoration: none;
	background-image:  url(../images/bg.gif);
 background: #E8F1FE;
}

Validated the CSS in W3c.

**Pedro Monteiro** · Sep 12, 2004, 17:05

Don't even bother with me guys.

Just noticed I'm using the Background attribute with the background-image.

sorry about this.

**Paul O'B** · Sep 12, 2004, 17:10

Hi,

You are rubbing out the image because you are overwriting the definition here.

Code:

 background-image:  url(../images/bg.gif);
 background: #E8F1FE;

Background is shorthand for all the background properties and any properties not specified revert to their defaults. Therefore you are effectively saying background-image:none

You need to specify background-color:#E8F1FE;
to just change the color and nothing else.

Aletrnatively combine them into the shorthand as follows.

Code:

background: #E8F1FE url(../images/bg.gif) repeat left top;

Hope that helps

Paul

**Pedro Monteiro** · Sep 12, 2004, 20:12

Thanks Paul, the alternative code you provided will come in handy.

The SitePoint Forums have moved.

User Tag List

Thread: Problem displaying background image with CSS

Thread Tools

Display

Problem displaying background image with CSS

Bookmarks

Bookmarks

Posting Permissions