SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem displaying background image with CSS

    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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try it like this...

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

  4. #4
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't even bother with me guys.

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

    sorry about this.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, the alternative code you provided will come in handy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •