CSS background-image not working

Discussion in 'HTML & Website Design' started by timckb, Aug 12, 2009.

  1. #1
    hi,
    beg my ignorance sort of new to this. I have been trying to develope a site using CSS and php. I am ok on both of these languages but recently i upgraded to window7 and IE8. I am also using FF as my development platform the problem i have is this.

    background-image: url(picture.jpg); does not work in either external or internal style sheets. the path is correct as i can open it in both browsers. My style sheet and image are in the same directory as the index page being developed.

    I am using Xampp and netbeans to develope the page before publishing it. I have done this before using the background-image and reletive paths but this is killing me.

    here is my CSS:
    html body {
        
        background-color:black;
    }
    
    .home{
           position:absolute;
           text-align:center; 
       }
    
    #logint{
         width:40%;
         text-align:center;
         font-weight:bold;
         font-size:1.5em;
       }
    #row{
        background-color:black;
        height:100px;
    }
    #enter{
           width:100%;
           height:600px;
           background-color:white;
           padding:3px;
           border-collapse:collapse;
          }
    #button{
            background-image: url(loginbutton.jpg);
    }
          
    Code (markup):
    and my HTML code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
         <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <link rel="stylesheet" type= "text/css" href="MainCSS.css"/>
        <style type="text/css">
            #test{
                background-image:url(http://www.tcbtech.co.uk/images/blue_bar.gif);
            }
       </style>
      
      </head>
      <body>
          <div class="home" >
             <table id="enter" >
                 <tr id="row">
                     <td rowspan="3" ></td>
                     <td></td>
                     <td rowspan="3"></td>
                 </tr>
                 <tr>
                     <td id="logint">
                         <br>
                         <h1>Friends
                        <br>
                        &nbsp;DVD<br>
                        Library</h1>
                        <br>
                     </td>
                 </tr>
                  <tr>
                     <td id="button"></td><!--this is where i am testing the image button is an external reference and test for the internal stylesheet -->
                 </tr>
             </table>
          </div>
      </body>
    </html>
    
    
    Code (markup):
    Can anyone help?
     
    timckb, Aug 12, 2009 IP
  2. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try setting a height and width for it :)
     
    dean5000v, Aug 12, 2009 IP
  3. timckb

    timckb Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    dean500v,

    thanks sweet and simple like most coding problems...that resolved my issue.

    timckb
     
    timckb, Aug 12, 2009 IP
  4. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Glad to help :)
     
    dean5000v, Aug 12, 2009 IP