CSS Forum

**monkeymafia** · 06-18-2007, 01:49 PM

hi could somebody please help me. in my css code ive declared a background image but it does not show. what am i doing wrong. its the "#header" that wont show.

this is my css code:

Code:

body { 

  margin:0px; 
  text-align: center; 
  color: white; 
  background: #aed0e4 url('images/background.gif') repeat-x fixed top left;
  
}   

#container
{
          width: 752px;
          margin: 0px auto;
          text-align: left;
          border-left: 1px solid #999999;
          border-right: 1px solid #999999;

}

#header

{
  width: 752px;
  background: url ('images/top_bg.jpg');
  background-repeat: no-repeat;
  
  
}

and this is my html code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  
  <title>Portfolio v1</title>
  <link href="layout.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>
  
    <div id= "container">
    
    <div id = "header">
    
    
    </div>
    
    
    
    </div>
    
  </body>
</html

any help would be appreciated. thanks again

**angele803** · 06-18-2007, 01:53 PM

I think you will need to declare a height for the header. Since there is no content in the header div, some browsers can't figure out how tall to make the background image.

**monkeymafia** · 06-18-2007, 01:58 PM

hi
thanks for the reply, i added a height of 600px but it only extended the left and right border for the container, still no image.

**angele803** · 06-18-2007, 02:00 PM

You need to declare a height for the header div, not the whole page.
Try this:

Code:

#header

{
  width: 752px;
  background: url ('images/top_bg.jpg');
  background-repeat: no-repeat;
  height: 100px;
}

Put the actual height of the image where I put "100px"

**monkeymafia** · 06-18-2007, 02:06 PM

yes thats what I did :P i dont know why it changes the size of the left and right border because thats the container. this is so frustrating :/

**LadynRed** · 06-18-2007, 02:58 PM

1 - take the quote marks out of the path in following the url('xxxxx'). You don't need them and they can go haywire on you.

Further, the syntax should be background: url(images/top.jpg) no-repeat; - no spaces.

Adding a height should not affect the left and right margins whatsoever.

**monkeymafia** · 06-18-2007, 03:13 PM

thanks for the reply ladynred. but that did not work also. its so something so simple i just dont understand why it doesnt work

**tripy** · 06-18-2007, 07:56 PM

You use a relative path in your CSS rule, so, are you sure the file exists relatively from the current path ?

Deeper explaination:
you have an images directory in the root folder.
If you access a page at the root level, the browser will find the file.
But if you are in a subfolder, the browser will try to look for "subfolder/images/file.jpg", and that could be your problem.

And as a reminder:

Code:

/images/file.jpg   ==> The file named "file.jpg", in a folder placed on the site root level
images/file.jpg    ==> The file named "file.jpg" placed in a subfolder named "images" at the current place
../images/file.jpg ==> The file named "file.jpg" placed in the folder 1 level up of the current, if possible, or current if we are on the root level

**mastercomputers** · 06-19-2007, 05:10 AM

First of all, the attributes in your HTML aren't correctly formed.

Always do <tag attrib="value"> and not <tag attrib = "value">

Cheers,

MC

**monkeymafia** · 06-19-2007, 11:10 AM

thanks for the replies. ive cleaned up the tags. and also im sure the directory is correct because the first 'images/background.gif' loads fine. and the mainbg is in the same directory.

**karinne** · 06-19-2007, 11:11 AM

Give us a link then!