Background disappear where its margin!

[harvekst]

I have a school project to make a web site in html and css using notepad as a tool. Well, I stumbled across a big problem today, and I have to deliver it to morrow so i need an answer quick.

well, the background is suposed to be a frame around the actual site, but on the top and on the left i disepears. I can see it on the bottom and to the right.

Heres a picture of the site

And where the drawing is there should be white splatter.



The css code, alitle messy.

body

	{
	background:#b1b0b0;
	color:white;
	margin-left: 70px;
	margin-top: 30px;
	font-family:"verdana";
  font-size:13px;
  vertical-align:center; 
  }

 

h3

  {
   font-family: "Garamond";
  font-size:35px;
  margin:0 0 200 130;
  position:absolute;left:170px;top:10px;
  }



h2

  {
  font-family: "Calibris";
  font-size: 15px;
  position:absolute;left:180px;top:50px;
  }

h2.lang

  {
  font-family: "Calibris";
  font-size: 15px;
  position:absolute;left:300px;top:80px;
  }


h2.nine

  {
  font-family: "Calibris";
  font-size: 15px;
  position:absolute;left:180px;top:65px;
  }
		
h1
  
  {
  
  font-family: "Garamond";
  font-size:30px;
  margin:0 0 200 0;
  position:absolute;left:180px;top:10px;
  }

div.ramme
{

width:1500px;
height:1500px;
background:url(ramme.jpg);
background-repeat: no-repeat;
background-position: -448px -150px;


}



div.hele
  {
  background:black;
  width:850px;
  height:100;
  padding: 15px;
  border: Solid white 4px;
  
  
  
  
  }
  
div.innhold
  {
  background:#b1b0b0;
  width:850px;
  height:625px;
  padding: 15px;
  border: Solid white 4px;
  border-top: solid black 0px;
  vertical-align:center; }
  
div.inni
  
  {
  Width:600px; 
  height:30;
  Background:#bfbfbf;
  border: solid white 3px;
  text-align: center;
  font: Black;
  float:right;
  margin: 82 60 0 0;
  border-bottom: solid black 0px;
  
  }
 
div.liten
  {
  background:#cccccc;
  color:black;
  width: 370px;
  Height: 180px;
  border: solid white 1px;
  margin: 300 0 0 25;
  position:absolute;left:100px;top:125px;
  }




div.liten2

{ 
  background:#cccccc;
  width: 370px;
  Height: 180px;
  color: black;
  border: solid white 1px;
  margin: 300 200 200 425;
  position:absolute;left:100px;top:125px;
} 

div.liten3
  {
  background:#cccccc;
  color:black;
  width: 370px;
  Height: 180px;
  border: solid white 1px;
  margin: 495 0 0 25;
  position:absolute;left:100px;top:125px;
  }
  

div.liten4

{ 
  background:#cccccc;
  width: 370px;
  Height: 180px;
  color: black;
  border: solid white 1px;
  margin: 495 200 200 425;
  position:absolute;left:100px;top:125px;
} 

div.lang

{ 
  background:#cccccc;
  width: 770px;
  Height: 225px;
  color: black;
  border: solid white 1px;
  margin: 60 100 200 25;
  position:absolute;left:100px;top:125px;
} 


div.storsak
  {
    background:#cccccc;
  width: 770px;
  Height: 620px;
  color: black;
  border: solid white 1px;
  margin: 60 100 200 25;
  position:absolute;left:100px;top:125px;
  }


img.lesher
  {
   position:absolute;right:20px;bottom:10px;
   }
img.nylesher
  {
   position:absolute;right:20px;bottom:10px;
   }
img.nylesher2
  {
   position:absolute;right:20px;bottom:10px;
      }
   
img.lesherlang
  {
   position:absolute;right:20px;bottom:10px;
   }
img.stuff
  {
  margin:0 0 50 20;
  }
  
img.iron
  {
  margin:10 10 10 10;
  }

img.fighter
  {
  margin:10 10 10 10;
  }
  
img.batman
  {
  margin:10 10 10 10;
  }

img.meny
  {
  margin:5 10 10 10;
  }
  
a.lesher
  {
  color:#cccccc;
  font-size:20px;
  }
  
a.lesherlang
  {
  color:#cccccc;
  font-size:20px;
  }
 
a:hover.overskrift
  {
  color:black;
  Text-decoration:none;
  }


a:hover.lesher  

  {
  color:#cccccc; 
  text-decoration:none;
  }  

a.meny
  {
  color:#bfbfbf;
  text-decoration:none;
  }
a:hover.meny
  {
  img:filmhvit.gif;
  
  }

a

  {
  color:black;
  font-size:20px;
  }
  
  
a:hover
  {
  color:white;
  text-decoration:none;
  }
  


div.nyhet1
  {
    background:#cccccc;
  width: 770px;
  Height: 180px;
  color: black;
  border: solid white 1px;
  margin: 70 100 200 25;
  position:absolute;left:100px;top:125px;
  }
  
div.nyhet2
  {
    background:#cccccc;
  width: 770px;
  Height: 180px;
  color: black;
  border: solid white 1px;
  margin: 270 100 200 25;
  position:absolute;left:100px;top:125px;
  }

  
div.nyhet3
  {
    background:#cccccc;
  width: 770px;
  Height: 180px;
  color: black;
  border: solid white 1px;
  margin: 470 100 200 25;
  position:absolute;left:100px;top:125px;
  }

and the index html site.

<html>
<head>
<title>
Ukultur! Det meste innen Film og Musikk
</title>
<link rel="stylesheet" type="text/css" href="film.css"/>

</style>
</head>
<body>

<div class="ramme">
<div class="hele">
<div class="inni">
<TD><a href="nyheter.htm" class="meny"

onmouseover="document.bi.src='nyheterhvit.gif'" 

onmouseout="document.bi.src='nyheter.gif'"/>

<img src="nyheter.gif" class="meny" border="0" name="bi"/></a>



<TD><a href="film.htm" class="meny"

onmouseover="document.bi2.src='filmhvit.gif'" 

onmouseout="document.bi2.src='film.gif'"/>

<img src="film.gif" class="meny" border="0" name="bi2"/></a>



<TD><a href="musikk.htm" class="meny"

onmouseover="document.bi3.src='musikkhvit.gif'" 

onmouseout="document.bi3.src='musikk.gif'"/>

<img src="musikk.gif" class="meny" border="0" name="bi3"/></a>

<TD><a href="nettsider.htm" class="meny"

onmouseover="document.bi4.src='nettsiderhvit.gif'" 

onmouseout="document.bi4.src='nettsider.gif'"/>

<img src="nettsider.gif" class="meny" border="0" name="bi4"/></a>


</a>
</div>




<a href="index.htm" class="overskrift">
<img src="overskrift.gif" class="stuff">
</a>
</div>
<div class="innhold">





<br>
<div class="liten">
<a href="ironman.htm">
<img src="ironman.gif" class="iron"></a>
<h1>
Iron Man
</h1>
<h2>
Annmeldelse av årets første superhelt film!
</h2>
<TD><a href="ironman.htm" class="lesher"

onmouseover="document.lesher2.src='lesherhvit.gif'" 

onmouseout="document.lesher2.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher2"/></a>

</a>
</div>







<div class="liten2">
<a href="Blacklips.htm" class="iron">
<img src="blacklips.gif" class="iron">
</a>
<h1>
Black lips
</h1>
<h2>
Hove aktuelle Black lips anmeldelse, tull eller ball?
</h2>

<TD><a href="blacklips.htm" class="lesher"

onmouseover="document.lesher3.src='lesherhvit.gif'" 

onmouseout="document.lesher3.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher3"/></a>

</a>
</div>

<div class="liten3">
<a href="nine.htm" class="iron">
<img src="nine.gif" class="iron">
</a>
<h1>
Nine Inch Nails!
</h1>
<h2 class="nine">
Nine Inch Nails følger trenden og gir vekk cden sin gratis!
</h2>

<TD><a href="fighter.htm" class="lesher"

onmouseover="document.lesher4.src='lesherhvit.gif'" 

onmouseout="document.lesher4.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher4"/></a>

</a>
</div>





<div class="liten4">
<a href="spirit.htm" class="iron">
<img src="spirit.gif" class="iron">
</a>
<h1>
The Spirit
</h1>
<h2>
Ny kunstnerisk film av Frank Miller i vente.
</h2>

<TD><a href="spirit.htm" class="lesher"

onmouseover="document.lesher5.src='lesherhvit.gif'" 

onmouseout="document.lesher5.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher5"/></a>

</a>
</div>






<div class="lang">
<a href="batman.htm">
<img src="batman.gif" class="iron"></a>
<h3> Vi teller ned til the Dark knight! </h3>
<h2 class="lang">
I sommer er det premiere på den nye batman filmen, jeg sover mindre og mindre jo mindre tid det er til premieren.
Les om den her!
</h2>

<TD><a href="batman.htm" class="lesherlang"

onmouseover="document.lesher6.src='lesherhvit.gif'" 

onmouseout="document.lesher6.src='lesher.gif'"/>

<img src="lesher.gif" class="lesherlang" border="0" name="lesher6"/></a>

</div>



</div>




Ukultur.no
Kontakt oss
</div>
</body>
</html>

This is my first page in css so be kind.

[Wickham]

In the style for body you have margin-left: 70px; margin-top: 30px which is stopping the background image in div.ramme going to the top and left.

You need to put the background image in the body with no body margin and leave the background-color to go around the right and bottom of the image if the image is smaller than the window:-

body

{ background-image: url(images/ramme.jpg);
background-repeat: no-repeat;
background-color: #b1b0b0;
color:white;
/*margin-left: 70px;
margin-top: 30px;*/
margin: 0;
font-family:"verdana";
font-size:13px;
vertical-align:center;
}

and delete the background image in div.ramme and add the margins so that you have a space on the left and top to show the background image:-

div.ramme
{
width:1500px;
height:1500px;
/*background:url(ramme.jpg);*/
/*background-repeat: no-repeat;*/
/*background-position: -448px -150px;*/
margin-left: 70px;
margin-top: 30px;
}

Other comments:-
You should use a doctype
You have TD tags but they should be inside <table> and <tr> tags.