Backgroud-image - works when embedded but not in external css file

HTML & CSS
1

Hi,

Newbie having problems… don’t all groan at once :slight_smile:
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:


<!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>
2

did you try just a slash versus ./?

3

Hi,

Welcome to Sitepoint:)

Is this rule correct?


    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 :slight_smile:

4

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.

5

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:


<link rel="stylesheet" type="text/css" href="css/test.css" />

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

Sorry… typo.

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

Thanks
graham

7

lol - No I think I got in there first :slight_smile:

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 :wink: