0

Hi All,

I've been struggling with this problem for the better part of 2 weeks. (Trying to help an aunt with a website.) I just can't seem to discover the issue. I've simplified the scenario to a very basic site just for the ease of troubleshooting. But I cannot get the image to display via the style.css. After I take a look at the code in Firebug I get the error "Failed to load the given url". I've tried using file, double quotes, single quotes, no quotes, but just cannot get this to display. Any insight would be appreciated. I'd consider myself a beginner after reading through some of the discussions here so please keep that in mind.

Below is the index.HTML which cannot display the CSS background-image in the HEADER DIV.

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
</head>
<title>
Test Site
</title>

<body>
   <div id="container"></div>
   <div id="header"><p>This is the header</div>
   <div id="sidebar"><p>Home</p>
                     <p>Link 1</p>
                     <p>Link 2</p>
                </div>
   <div id="content"><p> Content Goes Here</p></div>
   <div id="footer"></div>
</body>
</html>

This is the style.css I am working with.

body {background: #ffffff; margin: 0; padding: 0;}
a {color: #2b2bf6;}    

#container {
width: 900px; 
margin: 0; 
padding: 0; 
background: #dddddd;
}           

#header {
width: 900px;
height: 150px;  
background: url("/images/1.jpg");
border-bottom:2px solid #000000;
}

#sidebar {
float:left;
width: 200px;
 height: 400px;
 margin: 0;
 padding: 0;
 border: 0; 
 float: left; 
 background: #f0e811;}

#content {
width: 700px;
 height: 400px;
 margin: 0; 
 padding: 0;
 border: 0; 
 float: left;
 background: #5882FA;}

#content p {
font-family: Arial;
 font-size: 14px}

#footer {
width: 900px;   
height: 70px;
margin: 0;
padding: 0;
border: 0; 
float: left;
background: #005500;
clear:both;}                            

Thanks for any effort you may be able to give!

Kelly

5
Contributors
8
Replies
51
Views
4 Years
Discussion Span
Last Post by Zagga
1

Try:

background-image: url(/images/1.jpg);

As an edit, did you try using an absolute URL?

Edited by Zagga

0

I've tried it without the quotes as you suggested. I'll try again when I get a chance tonight. I did try the absolute with the same outcome. :/

1

I just tried the code exactly as you have it (original post) and the problem seems to be with the preceeding slash in the URL (so a problem with the path, not the code). Instead of using the slash to indicate the root directory, try using a path relative to the CSS file.

For example, if you have a home directory containing your pages, and in this directory you have a directory called 'images' and another called 'css', the path in the css file should be background: url(../images/1.jpg);

Votes + Comments
What was the directory structure of your files? I'm still not able to produce a successful image.
1

I think <link rel="stylesheet" type="text/css" href="style.css"> should be within the <head> and </head> tags.
Must check path for image url.

Edited by pritaeas: Added markdown.

1

background:url(../images/1.jpg);
use this if your image is in images folder, I think it will work

1

hi KCM5052.
is the images folder in the same folder as the stylesheet?
if so,

background-image:url('images/1.jpg');

should do the trick.

and make sure the "1.jpg" image is a ".jpg" not a ".jpeg"

0

Hi everyone. Sorry for the delay. Thank you for all of your input! Unfortunately, I am still unable to get an image displayed successfully. I've tried all of your scenario's and combined them as well. I have some more time this weekend. I'll keep playing with it. Thank you all for your input so far. Very much appreciate it!

0

If you are still having trouble, can you let us know what directory structure you have? Where are the pages, CSS files and images?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.