SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image for header div background

    Hi all,

    I'm trying to put an image as the background for my header div. But it doesn't show up as the bg in the div, as expected, after I've entered the css and refreshed the page. I'm not sure where I'm going wrong, whether it's the css, my positioning or the image itself. Here is the css, below. Would appreciate suggestions.

    Code:
    #header {
    width: 100%;
    height: 160px;
    background: url 
    (http://s1214.photobucket.com/albums/cc495/svozdog/?action=view&current=headerbgimage.jpg);
    }
    
    #sitename
    
    #tagline
    
    
    #navigation {
    border: 1px solid black;
    text-decoration: none; 
    font-size: 90%;
    color: navy;
    font-weight: bold;
    width: 100%;  
    }
    
    #navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 2px solid black;
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
     }
    
    #navigation li {
    float: left;
    margin: 0;
    width: 16.6%;
     }
    
    #navigation li last {
    border-right: 17.0%;
    }
    
    #navigation a {
    display: block;
    line-height: 2em;
    border-right: 1px solid black;
    padding: 0 1em;
    }
    
    #navigation .last a {
    border-right: none;
    }
    
    #navigation a:hover {
    color: #FFFFFF;
    background: #711515;
    
     }
    
    #bodycontent, #header, #sitename, #tagline {
    border: 4px solid red;
    padding: 2px;
    margin-bottom: 2px;
    Last edited by ralph.m; Jul 15, 2011 at 22:58. Reason: fixed url link

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Two things off the top of my head. First, the final CSS element is lacking a closing bracket:

    Code CSS:
    #bodycontent, #header, #sitename, #tagline {
      border: 4px solid red;
      padding: 2px;
      margin-bottom: 2px;
    }

    and second, you have problems with that Photobucket URL. Try storing it on your own hard drive and writing a simple URL to access it for test purposes, say

    Code CSS:
    background: url (..images/headerbgimage.jpg);

    and see if those two fixes correct everything.

    Now watch someone smarter than me pop in and find something else entirely.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Also, make sure not to have a gap between url and the ():

    Code:
    #header {
      background: url(headerbgimage.jpg);
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried those suggestions and amended as seen below, but that didn't change anything. The bg image is still not showing up.

    Code CSS:
    /* CSS for Hike Direct */
     
    #header {
    height: 160px;
    background: transparent url (C:\Documents and Settings\Daniel Svozil\My 
    Documents\Hikedirect website\Website Images\headerbgimage.jpg);}
     
    #sitename
     
    #tagline
     
     
    #navigation {
    border: 1px solid black;
    text-decoration: none; 
    font-size: 90%;
    color: navy;
    font-weight: bold;
    width: 100%;  
    }
     
    #navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 2px solid black;
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
     }
     
    #navigation li {
    float: left;
    margin: 0;
    width: 16.6%;
     }
     
    #navigation li last {
    border-right: 17.0%;
    }
     
    #navigation a {
    display: block;
    line-height: 2em;
    border-right: 1px solid black;
    padding: 0 1em;
    }
     
    #navigation .last a {
    border-right: none;
    }
     
    #navigation a:hover {
    color: #FFFFFF;
    background: #711515;
     
     }
     
     
    #bodycontent, #header, #sitename, #tagline {
    border: 4px solid red;
    padding: 2px;
    margin-bottom: 2px;
    }
    Last edited by Black Max; Jul 16, 2011 at 10:11. Reason: added code tags

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by svozdog View Post
    I've tried those suggestions
    No you haven't. You still have a gap between url and the ():

    Code:
    background: transparent url (C:\Documents and Settings\Daniel Svozil\My 
    Documents\Hikedirect website\Website Images\headerbgimage.jpg);}
    That could be the problem, or it could be that the file path is wrong, but try getting rid of the gap first.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    May 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No you haven't. You still have a gap between url and the ():

    Code:
    background: transparent url (C:\Documents and Settings\Daniel Svozil\My 
    Documents\Hikedirect website\Website Images\headerbgimage.jpg);}
    That could be the problem, or it could be that the file path is wrong, but try getting rid of the gap first.
    Apologies ralph, I thought you meant spaces between the () and the C:. Anyway I've tried that, and double checked the file path, and neither have fixed that.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, sorry for not being clear. What I tend to do next is open Firebug (a Firefox addon) and hover over the bg image. If the file path is correct, a thumbnail of the image will pop up. If that doesn't happen, you know the path is wrong.

    Obviously this would be easier with a live link, but I gather this is on your computer. Another thing to try would be to make a copy of the page with the CSS in the head of the document, the bg image in the same folder as this test page, and change the bg link to

    Code:
    background: transparent url(headerbgimage.jpg);}
    That way you can tell if there's anything else wrong with the page than the file path.

    As an aside, what's this in you CSS?—

    Code:
    #sitename
    
    #tagline
    
    
    #navigation {
    border: 1px solid black;
    text-decoration: none;
    font-size: 90%;
    color: navy;
    font-weight: bold;
    width: 100%;
    }
    #sitename and #tagline are out in no-man's-land, and that could be messing things up. Did you mean to write #sitename, #tagline, #navigation (assuming that the following style block applies to all three id selectors?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    As an aside, what's this in you CSS?

    Code:
    #sitename
    
    #tagline
    
    
    #navigation {
    border: 1px solid black;
    text-decoration: none;
    font-size: 90%;
    color: navy;
    font-weight: bold;
    width: 100%;
    }
    #sitename and #tagline are out in no-man's-land, and that could be messing things up. Did you mean to write #sitename, #tagline, #navigation (assuming that the following style block applies to all three id selectors?
    Cool. I haven't got firefox, but I may get it to try that, and also the internal CSS. The #sitename and #tagline are two additional divs, which are edited in the last rule in the css I have included in my post. I have tried removing them, but they have no effect.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, good. Let us know how you get on with those.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Darn me for not seeing the URL gap. That's what happens when I post "advice" at 3 am.

  11. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Back again.

    So I've worked out what ISN'T wrong. I've tried the Firebug add on. Open page in question, clicked firebug icon in top-right of browser, hovered over where the image SHOULD be, and did NOT get the said thumbnail.

    I've tried using the embedded style sheet. Code is working, seeing as the text and everything else, borders and colors have changed as per the code.

    I've also double checked the file path, by putting the image straight into the html on the page. And all appears well and good. EXCEPT, the image is still not showing up!

    I have had an idea. The image I'm using is white fading to a photo. And it struck me that maybe something WAS wrong with the SIZE of the image. Could the size of the image be so large that it stretches beyond the borders of the div, so that only the white portion is visible (or invisible, in this case) ?

    And what would I do with the css to adjust the image to fit just inside the div?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Still sounds like the file path is wrong to me. If the image doesn't show on hover in FB, then the path is wrong. Try putting the image in the same folder as the page with the CSS in the head. Than just cite the image as

    Code:
    background: url(headerbgimage.jpg)
    Since the header is 100% width, it's unlikely that the image is too big, unless it's huge. Perhaps align it to the right to check.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    since it seems you are new to CSS
    try not to shortcode your css just yet.

    just get use to writing out each of the properties by hand.

    first set the width and height of the header..
    setting up the width and height with actual pixels will force the div to expand to those proportions instead of not showing up cause there is no content within the #header div.

    Code:
    #header{
        width: *** px;
        height: *** px;
    }
    then keep adding on to the properties by telling it what to use as the headers background image..


    Code:
    #header{
        background-color: transparent; /* can change if you are using a transparent .png and looking for a different effect */
        background-image: url(' IMAGE URL HERE ');
        background-position: center center; /* can change depending on how you want the image positioned */
        background-repeat: no-repeat;
        width: *** px;
        height: *** px;
    }
    and you can even add

    Code:
    margin: 0 auto;
    padding: 0;
    to center your div, and make sure all the content within this div will be flush in the top left corner.


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
  •