SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get header background image to show

    I'm having trouble getting my header background image to appear. This is the image I want at the top of the header: http://ogmda.com/test/img/top_grunge.png

    Right now I have the CSS as:

    Code:
    header  {
    	background-image: url(../img/top_grunge.png);
    	background-position:top;
    	background-repeat:repeat-x;
    }
    My live preview is here.

    Anyone got any ideas? Seems like it may be clashing with #homeNav's background image logo ?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    On line 55 of your css we see the header code that you have posted.

    custom.css (line 55)
    Code:
    header {
        background-image: url("../img/top_grunge.png");
        background-position: center top;
        background-repeat: repeat-x;
    }
    On line 61 of the css, we see a more specific header shortcut that effectively overrides (deletes) the previous code. If you comment out this line, the top_grunge image will appear. If you just want to apply the background color, I suggest you use {background-color:#1C0F0A;} instead of the shortcut.

    custom.css (line 61)
    Code:
    header.row, section.row {
        background: none repeat scroll 0 0 #1C0F0A;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes sense! Thank you once again ronpat


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
  •