Having trouble with <div> background image for some reason

Discussion in 'CSS' started by McCoyH, Jan 17, 2012.

  1. #1
    Hi I'm updating one of my sites with a fresh template and for some reason my <div>s background image is not showing up. I am an experienced designer and have never had problems with this before so I guess I'm just overlooking a typo I made or something. The code is included below.

    <div id="main_header">
    <div id="logo">
    
    <img src="images/logo.png" alt="Logo" title="logo" />
    
    </div>
    
    [COLOR=#ff0000][B]<div id="logonav">
    Text will go here above div background image.
    </div>[/B][/COLOR]
    
    </div>
    Code (markup):
    And here is my CSS for the problem area:
    #main_header { width: 100%; height: 125px; float: top; padding: 0px; font: 12px Arial, sans-serif; color: #ffffff; }
    #logo { width: 450px; height: 125px; float: left; padding: 0px; }
    #logonav { background-image:url('images/logonav.png') repeat-x; width: 100%; float: top; padding: 0px; font: 12px Arial, sans-serif; color: #ffffff; }
    Code (markup):
     
    McCoyH, Jan 17, 2012 IP
  2. manishsankari

    manishsankari Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There is no problem in your css. I just copy and past it ...its working fine.. Did you try different browser ?
     
    manishsankari, Jan 17, 2012 IP
  3. McCoyH

    McCoyH Member

    Messages:
    208
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #3
    Idk I just did some tinkering around with it and it ended up working somehow... Must have just had a typo or something.. Thanks very much for looking into it for me though!
     
    McCoyH, Jan 17, 2012 IP
  4. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #4
    It definitely has a problem, although it is up to each browser as to how they interpret or resolve that problem, so you may not always be aware of it. If setting the url and the repeat properties of the background image, do it EITHER of the following two ways:

    #logonav { background: url(images/logonav.png) repeat-x; 
    }
    
    #logonav { background-image: url(images/logonav.png);
               background-repeat: repeat-x; 
    }
    Code (markup):
    But avoid MIXING those shorthand and specific methods.
     
    FilmFiddler, Jan 18, 2012 IP
  5. McCoyH

    McCoyH Member

    Messages:
    208
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    Oh ok, I usually only use the first method, but I'll be sure not to mix them up. Thank you.
     
    McCoyH, Jan 18, 2012 IP
  6. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #6
    @ Film that is false. You can combine both and it is highly recommended when you start to 'compress' your CSS file to optimize it. This way you can change only one of the actual CSS styles rather then all of them represented with the shorthand format and having to retype things just to change the image itself.

    EDIT: After looking at OP's post, I figured you meant his error with combing "repeat-x" inside of the "background-image:" - which is false and is the mistake that he was having.
     
    JamesD31, Jan 19, 2012 IP
  7. Irfi0009

    Irfi0009 Banned

    Messages:
    17,584
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    48
    #7
    yes it is working properly
     
    Irfi0009, Jan 20, 2012 IP
  8. Irfi0009

    Irfi0009 Banned

    Messages:
    17,584
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    48
    #8
    gud.............
     
    Irfi0009, Jan 20, 2012 IP