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

Member Avatar for Zagga

Try:

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

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

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. :/

Member Avatar for Zagga

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);

commented: What was the directory structure of your files? I'm still not able to produce a successful image. +0

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.

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

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"

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!

Member Avatar for Zagga

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.