Grow your CSS skills. Land your dream job.

Silly problem really! (background image wont show itself)

  • # May 1, 2009 at 6:00 am

    Hi, I’m making, or trying to make, that 3 state menu(with twist) I want the background image to be the same for every un ordered list item – so I can change the text myself for each list item. In my mind, this seems like childs play with CSS but…
    I got this really silly problem. The background images wont show up!

    Can you guys take a quick peak at the code for me and see if I made some kind of uh – I-dont-know-what-kind of problem, pretty please.

    I also tried to make a test DIV at the bottom of my html and add a background image. It didn’t show up either.
    My image folder IS named "images" and the background image I want to use IS name "button.png" so I’m going mad now because I see no error in my code or anything, and still it wont show!

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


      Blimp

      Blimp

      text

    and CSS

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: #ff6677;
    }

    #page-wrap {
    width: 500px;
    margin: 0 auto;
    background: #ff3530;
    border: solid 1px #000000;
    }

    ul#menu {
    list-style: none;
    }
    ul#menu li {
    display: inline;
    background: background: url(images/button.png) no-repeat bottom center;
    display: block;
    height: 55px;
    width: 150px;
    float: left;
    }
    ul#menu li:hover {
    background-position: center center;
    }

    #blimp {background: #990000;
    }

    #blimp img {display: block;
    margin: 0 auto 0 auto;
    }

    #smallhead1 {background: url(images/head1.jpg);
    width: 264px;
    height: 28px;
    }

    Cuddles
    Pettis

    # May 1, 2009 at 6:23 am

    Your CSS file is in a folder on the same level as your images directory.

    The path to your images, relative to the CSS file is

    Code:
    background: background: url(../images/button.png) no-repeat bottom center;
    # May 1, 2009 at 7:05 am

    Thank you. Yeah two dots made it. But only in the "test div" at the bottom. It still didn’t show up in the unordered list. Is it not possible maybe. To make background imags for list items in common?

    Code:
    ul#menu {
    list-style: none;
    }
    ul#menu li {
    background: background: url(../images/button.png) no-repeat bottom center;
    display: block;
    height: 55px;
    width: 150px;
    float: left;
    }
    # May 1, 2009 at 7:20 am

    Look carefully at the code you just posted. You have ‘background:’ twice, that might have something to do with it.

    # May 1, 2009 at 7:27 am

    geez, I feel I’m asking such stupid questions :( yeah of course it was that problem. I guess I need some air to clear my head so I wont make these silly mistakes.

    Thanks anyway!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".