Vollbild Hintergrundbild mit Links Positionierung

sic9

Grünschnabel
hallo zusammen

Ich habe eine frage wegen Positionierung..

Mein Problem ist da das Bild sich immer an fenster anpasst, kann ich keine Button Grössen angeben...
die sind dann irgentwo anders wenn alles kleiner wird.. kann mir jemand sagen wie ich das machen muss, dass die Links immer an diesen positionen des BIldes bleiben, egal was für Grösse das Browserfenster hat..

Bild hat eine Auflösung von 1366x768px und Orginal ist ganz unten verlinkt...

Danke im Voraus für euere Hilfe..



Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

 <title>TEST AG</title>

 <style type="text/css">

#hintergrund
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
margin:0;
padding:0;
}


 #inhalt { width:500px; height:600px; position:absolute; top:250px; left:200px; overflow: auto;}

 #btn_home { width:100px; height:100px; position:relative; top:1px; left:200px; cursor: pointer;}
 #btn_produkte { width:100px; height:100px; position:relative; top:1px; left:300px; cursor: pointer;}
 #btn_services { width:100px; height:100px; position:relative; top:1px; left:800px; cursor: pointer;}
 #btn_kontakte { width:100px; height:100px; position:relative; top:1px; left:1300px; cursor: pointer;}

 </style>

 <script type="text/javascript">
  function changePic(txt)
  {
   document.getElementById("desc").innerHTML=txt;
  }
 </script>
</head>

<body>


<div id="hintergrund">

 <img src="index.png" style="width:100%;height:100%" alt="hintergrund">

 <div id="btn_home" onclick="location.href='index.html';"></div>
 <div id="btn_produkte" onclick="location.href='produkte.html';"></div>
 <div id="btn_services" onclick="location.href='services.html';"></div>
 <div id="btn_kontakte" onclick="location.href='kontakte.html';"></div>

 <div id="inhalt"></div>

<div id="box">box</div>

</div>

//http://www.fotos-hochladen.net/uploads/agtestgs50a1zwid.png

</body>
</html>
 
Tausche hier die Positionsarten absolute u. relative gegeneinander aus, und positioniere die Elemente von rechts beginnend:
CSS:
#hintergrund
{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
margin:0;
padding:0;
}

#btn_home { width:100px; height:100px; position:absolute; top:1px; right:310px; cursor: pointer;}
#btn_produkte { width:100px; height:100px; position:absolute; top:1px; right:210px; cursor: pointer;}
#btn_services { width:100px; height:100px; position:absolute; top:1px; right:110px; cursor: pointer;}
#btn_kontakte { width:100px; height:100px; position:absolute; top:1px; right:10px; cursor: pointer;}
 
Zurück