Background Image Problem

**TCH-RobertM** · November 5, 2004

hi everyone, I have been playing around with creating a site that uses Html and css.

What I am trying to do is have background images for the body and footer

when I load the images directly into the htlm using

it shows the image with no problem.

when I try to load it using the background element of CSS the images are not laoding

can someone take a look at the below HTML and CSS and see if they notice where my problem resides. I have been playing with this now for some time and my eyes are gettign a bit buggy

thank you

Robert

Here is the html

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>RMulhern.com template</title>
<link rel="stylesheet" type="text/css" href="css/rmulhern.css" />
</head>
<body>
<div id="page">
	 <div id="header">
 <img src="images/header.png" width="760" height="160" alt="RMulhern.com header" />
 </div> <!-- ends HEADER div -->

<div id="main">
   <div id="leftside">
    	 <div id="content">
      <h1>Top_left</h1>
      <p></p>
      <p></p> 
      <p></p>
	 <img src="images/background.png" width="760" height="160" />
      <hr>
     <h1>Bottom_left</h1>      
       <p>Whatever I want to put here.this way I can see exactly where the page will wrap so I can put a divideer on the background image at exactly the position I want the page split this will create a border like effect on the right side so as to match up to the HR image I have above this text</p> 	 
    	 </div> <!-- ends CONTENT div -->
  	 </div> <!-- ends LEFTSIDE div -->
   
   <div id="rightside">
     <h1>Additional Link’s</h1>
       <ul>
        <li><a title="LINK title" href="#1">Link</a> – gives a nice text seperator</li>
    	 <li><a title="LINK title" href="#1">Link</a> – gives a nice text seperator</li>
    	 <li><a title="LINK title" href="#1">Link</a> – gives a nice text seperator</li>
     </ul>
   <p>11px font</p>
  	 </div> <!-- ends RIGHTSIDE div -->


   <div id="fillerbot"></div>
	 <div id="footer">
     <p>Robert Mulhern Copyright 2004 © All rights reserved.
	 </div> <!-- ends FOOTER div -->
</div>  <!-- ends MAIN div -->
</div>  <!-- ends PAGE div -->
</body> <!-- ends BODY div -->
</html>

here is the CSS

>html, body, div {font: normal 12px verdana, arial, georgia, serif; color: #000;}

body {background: #FFF; margin: 0; padding: 0;}

#page {width: 761px; margin: 0 auto; position: relative;}

#header {
 width: 760px; height: 160px;
 top: 20px; left: 0px;
position: absolute;
 } 
 

#main { 
width: 761px; 
background:url("images/background.png");
position: absolute;
top: 200px; left: 0px;
z-index: 1;
}

#leftside {
float: left; width: 433px;
padding: 0 0 0 25px;
}

#content {width: 420px;}

#content h1 {
color: #C2C2C2; 
font-weight: normal; 
font-size: 20px; 
font-family: georgia, arial, verdana, sans-serif; 
margin: 0 0 5px 10px; padding: 0 0 0 10px;
}


#content p {
margin: 10px 5px 10px 10px; 
line-height: 17px; 
font-size: 12px; 
font-family: arial, verdana, georgia, serif;
}

#content p a, 
#content p a:link, 
#content p a:active {
color: #7B0A0A; 
text-decoration: none; 
border-bottom: 1px solid #7B0A0A;
}

#content p a:visited {
color: #9C4848; 
border-bottom: 1px dotted #BE8585; 
text-decoration: none;
}

#content p a:hover {
color: #7B0A0A; 
background: #DEC2C2; 
text-decoration: none; 
border-bottom: 1px solid #7B0A0A;
}

#content ul {
list-style-type: none;
padding:0 0 0 40px; margin: 0 0 10px 0;
font-family: arial, verdana, sans-serif;
font-size: 11px;
color: #787870;
}

#content li {
padding-top: 0px;
padding-left: 13px;
padding-bottom: 5px;
}

#content li a, 
#content li a:link, 
#content li a:active {
color: #7B0A0A; 
text-decoration: none; 
border-bottom: 1px solid #7B0A0A;
}

#content li a:visited {
color: #9C4848; 
border-bottom: 1px dotted #BE8585; 
text-decoration: none;
}

#content li a:hover {
color: #7B0A0A; 
text-decoration: none; 
border-bottom: 1px solid #7B0A0A;
} 

#rightside {
float: left; width: 240px;
margin: 0; padding: 0; 
}

#rightside p { 
color: #9C9C9C; 
margin: 0 20px 10px 20px; 
font-size: 11px; font-family: arial, verdana, georgia, serif;
}
#rightside li { 
color: #9C9C9C; 
margin: 0 20px 10px 20px; 
font-size: 11px; font-family: arial, verdana, georgia, serif;
}

#rightside h1 {
color: #C2C2C2; 
font-weight: normal; 
font-size: 18px; 
font-family: georgia, arial, verdana, sans-serif; 
margin: 0 0 5px 10px; padding: 0 0 0 10px;
}
 
#fillerbot {
width: 760px; height: 14px;
clear: both;
}	
#footer {
width: 760px; height: 89px;
background: url("images/footerbg.PNG") no-repeat; 
padding: 20px 0;
}

#footer p {
font-family: arial, verdana, georgia, serif;
text-align: center; 
color: #616760;
font-size: 12px;
margin: 3px 0;
padding: 11px 0;
}

Thanks again if you can see where I am going wrong

the CSS may be a littlle butchered now because of all the experimenting I have been doing....

Robert

**btrfld** · November 5, 2004

Hi Robert.

So far there are a couple of things I see.

In the Footer:

Linux names are case-sensitive, and the image name is footerbg.png, but the declaration says footerbg.PNG.

Footer and Main:

There's a folder path problem with the declaration of the images in the css file. The css file lives a level down from public_html in the 'css' folder and the images live in the 'images' folder at the same level. But the declarations say url("images/[image name]") which expects the 'images' folder to be below the 'css' folder. Try it like this: url("/images/[image name]"), which looks for the 'images' folder one level down from 'public_html' where it actually is.

Those two changes made both the footer and the main background appear for me.

One other thing about the code in the footer. XHTML requires that all tags be closed, but the <p> tag in your code is not closed. Since you're using XHTML TRANSITIONAL it will probably display, but it won't validate.

Hope that helps.

**TCH-RobertM** · November 5, 2004

btrfld,

Thank you so much for finding that... It really was driving me a little buggy LOL

I corrected those issues and am on my way to cleaning up the rest of the minor glitches I have. ..... Thanks again Hopefully one day I can return the favor for you....

Robert

Thumbs Up

**btrfld** · November 5, 2004

You're most welcome. We love to help around here. And besides, it's fun. Thanks for the opportunity.

Sign In

Background Image Problem

Recommended Posts

TCH-RobertM

btrfld

TCH-RobertM

btrfld

Join the conversation

Hosting