SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Melbourne
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool backgroud-image - works when embedded but not in external css file

    Hi,

    Newbie having problems... don't all groan at once
    I'm having problems with the "background-image: url(img/bg.jpg)" statement.

    If the style sheet is in the root directory all is ok.
    If the style sheet is embedded all is ok
    The problem only occurs when using an external style sheet.

    I've tried using the "./" if front of the path to both the image & the style sheet... I've also tried using the full path to these files.
    All other styling within the document is working and both css & xhtml validate ok.

    The problem line is in the #header

    Hoping it's something really dumb that I've done and just can't see.

    Here's the embedded version on the doc:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Test2 Backgound CSS Image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    body {
      background-color: #D3D3D3; /* lightgrey */
      min-width: 900px;
      min-height: 540px;
      font: small arial, helveticta, verdana, sans-serif;
      color: #FFD700; /* gold */
    }
    
    #page {
      position: relative;
      top: 0;
      left: 0;
      margin-top: 5px;
      margin-left: auto;
      margin-right: auto;
      height: 535px;
      width: 700px;
      background-color: white;
    }
    
    #header {
      height: 120px;
      width: 700px;
      background-color: #ADD8E6; /* lightblue */
      background-image: url(img/bg.jpg);
      background-repeat: repeat-x;
    }
    
    #content {
      position: absolute;
      top: 120px;
      left: 0;
      width: 100%;
      height: 380px;
      background-color: #F8F8FF; /* ghostwhite */
    }
    
    
    #footer {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 0;
      height: 35px;
      width: 100%;
      background-color: #E6E6FA; /* lavender */
      border-top: 1px solid;
    }
    
    p.copyright {
      margin: 0 0 10px 10px;
      padding: 5px 30px 0 0;
      width: 300px;
      float: left;
    }
    
    #footer ul.legal {
      margin: 0;
      padding: 5px 10px 0 0;
      text-align: right;
    }
    
    #footer li {
      display: inline;
    }
    
    #footer li a:link, #footer li a:visited {
      color: #FFD700; /* gold */
    }
    </style>
    
    </head>
    <body>
    
    <div id="page">
    
      <div id="header">
        <h1>Header</h1>
      </div> <!-- header End -->
    
      <div id="content"> <!--  start -->
        <h2>Content</h2>
        <p>Some text.</p>
      </div> <!-- content End -->
    
      <div id="footer">
        <p class="copyright"> &copy; copyright name 2011 all rights reserved</p>
        <ul class="legal">
          <li><a href="">about us</a> | </li>
          <li><a href="">privacy policy</a> | </li>
          <li><a href="">disclaimer</a> | </li>
          <li><a href="">site map</a></li>
        </ul>  <!-- legal End -->
      </div> <!-- footer End -->
    
    </div> <!-- page End -->
    
    </body>
    </html>
    Last edited by ScallioXTX; Mar 17, 2011 at 15:19. Reason: wrapped code in [html][/html]

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    did you try just a slash versus ./?
    Ryan B | My Blog | Twitter

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    Is this rule correct?
    Code:
        background-image: url(img/bg.jpg)
    That says that you have a directory called "img" and inside that directory there is an image called "bg.jpg".

    If that is correct and assuming you have saved your page outside of that "img" folder (one level up) then the image should be found with the code that is already in the head of your document.

    If you are using an external stylesheet then the path to the image will depend on where you have saved the stylesheet. If its in the same directory as the html file then again the image should be found with the code as is. However if you have saved your css file somewhere else then you need to set the path accordingly.

    If you have an online link to the page we could tell you instantly where you were going wrong

  4. #4
    SitePoint Zealot bgil's Avatar
    Join Date
    Apr 2009
    Location
    So. California
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Links in external css files are relative to the css file not the html file, so if your css is in a different folder than the html, the relative link needs to be from the css location.
    -Brad

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Melbourne
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys

    Thanks for the quick responses. I'll answer all of the replies in this one post.

    rguy84:
    Yes, I tried the "/"... document can't see css file at all... All styling fails


    Paul O'B:
    The directory struct is as follows:

    public_html
    |
    |-css
    | |
    | test.css (file)
    |
    |-img
    | |
    | bg.jpg (file)
    |
    test.html (file)

    Here is the link I'm using to the external css file:
    [code]
    <link rel="stylesheet" type="text/css" href="css/test.css" />
    [code]

    bgil:
    [quote]
    Links in external css files are relative to the css file not the html file.
    [quote]

    And the winner is... Brad (bgil).

    Thanks Brad (+Ryan & Paul). I spent around 6 hrs trying to solve this yesterday (actually this morning - midnight - 6:00 am!!!).

    The solution: Background-image: utl(../img/bg.jpg);

    Thanks again everyone.
    graham.

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Melbourne
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry... typo.

    The solution: background-image: url(../img/bg.jpg);

    Thanks
    graham

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by geep View Post
    Hi guys



    And the winner is... Brad (bgil).
    lol - No I think I got in there first

    If you are using an external stylesheet then the path to the image will depend on where you have saved the stylesheet.
    Glad you sorted it but sorry you spent six hours on it


Tags for this Thread

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
  •