✔ Hintergrundbild

Status
Nicht offen für weitere Antworten.
Hi,

ein kurzer Blick in den Quelltext der genannten Seite beantwortet deine Frage von selbst:

Code: 
<div id="imageID"><img src="fileadmin/images/bg_image.jpg" style="width:100%; height:100%; z-index:2"></div>
Hierbei handelt es sich somit nicht um ein Hintergrundbild, sondern um ein Grafikelement, das mit width:100% und height:100% im Viewport "gestreckt", und der Seiteninhalt mit einer höheren Schichtposition z-index darüber gelegt wird.

mfg Maik
 
Ahh des hab i vorher gar nicht gefunden..

Aber find den Quelltext irgendwie verwirrend wo füg i des jetzt alles ein ..
was is da fürs bild...

Schick mal einen Teil von meinem Code vl kannst mir ja sagen wo das jetzt am besten rein ghört... Sorry bin voll da Nobie mit dem .. CSS und so ^^

Code: 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLC electric</title>
<style type="text/css">
<!--

#Logo {
	position:absolute;
	left:47px;
	top:41px;
	width:227px;
	height:91px;
	z-index:2;
}
#steuerungstechnik {
	position:absolute;
	left:406px;
	top:0px;
	width:287px;
	height:91px;
	z-index:3;
}
* {
   margin:0;
   padding: 0;
}
html, body { height: 100%; }
body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
   text-align: center;    
}
#wrapper {

   position: relative;
   width: 500px;
   height: 900px;
   margin: 30px auto 0 auto;    /* horizontale Zentrierung for mod.Browser */
   text-align: left;        /* zurück zum Standard */
}

-->
</style>
<script type="text/javascript">
<!--

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


</head>

<body > 
 <div id="Logo">
  <div align="center"><a href="index.html"><img src="images/Logo.jpg" alt="PLC - Home" width="228" height="91" border="0" /></a></div>
</div>

<div id="wrapper">
<div id="steuerungstechnik">
  <p align="center">&nbsp;</p>
  <p align="right"><img src="images/steuerungstechnik.jpg" width="235" height="32" /></p>
</div>

  <table id="Table22" cellspacing="0" cellpadding="0" width="550" align="center" border="0">
    <tbody>
..........................
...........................
............................
    </tbody>
 
</div>
</body>

</html>

ich weis ist nicht alles so verständlich bei meinem Code =)

Aber vl ein Tipp wo das rein ghört
 
Welche Grafik soll denn bei dir überhaupt im Fenster skaliert werden?

mfg Maik
 
hab das jetzt mal versucht aber irgendwie funkt das nicht...
das Bild ist dann irgendwo... denk mal das passt mit dem anderen alles nicht zusammen...
 
Hellsehen kann ich nicht und die tutorials.de-Glaskugel hat sich in den wohlverdienten Sommerurlaub verabschiedet.

Ergo, poste mal deinen aktuellen Quellcode.

mfg Maik
 
aso aso =)

Code: 
#background{position:absolute; z-index:1; width:100%; height:100%;}
#Logo {
	position:absolute;
	left:47px;
	top:41px;
	width:227px;
	height:91px;
	z-index:2;
}
#steuerungstechnik {
	position:absolute;
	left:406px;
	top:0px;
	width:287px;
	height:91px;
	z-index:3;
}
* {
   margin:0;
   padding: 0;
}
html, body { height: 100%; }
body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
   text-align: center;    /* horizontale Zentrierung for IE<6 (quirks) */
/**
   background-image: url(images/grau.jpg);
   background-attachment:fixed;
   background-position:center;
   background-repeat:no-repeat;

**/
}
#wrapper {

   position: relative;
   width: 500px;
   height: 900px;
   margin: 30px auto 0 auto;    /* horizontale Zentrierung for mod.Browser */
   text-align: left;        /* zurück zum Standard */
}

-->
</style>
<script type="text/javascript">
<!--

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


</head>

<body > 
<div>
<img id="background" src="images/img36.jpg" alt="" title="" /> 
</div>
 <div id="Logo">
  <div align="center"><a href="index.html"><img src="images/Logo.jpg" alt="PLC - Home" width="228" height="91" border="0" /></a></div>
</div>

<div id="wrapper">
<div id="steuerungstechnik">
  <p align="center">&nbsp;</p>
  <p align="right"><img src="images/steuerungstechnik.jpg" width="235" height="32" /></p>
</div>
...............
................
 
Erweiter mal den Quellcode folgendermaßen:

Stylesheet:

Code: 
#content{position:absolute; z-index:2; width:100%; height:100%;}

body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
   /*text-align: center;*/  /* auskommentiert */

HTML:

Code: 
<body>
<div>
<img id="background" src="http://www.tutorials.de/forum/images/img36.jpg" alt="" title="" />
</div>
<div id="content">
 <div id="Logo">
  <div align="center"><a href="index.html"><img src="http://www.tutorials.de/forum/images/Logo.jpg" alt="PLC - Home" width="228" height="91" border="0" /></a></div>
</div>

<div id="wrapper">
<div id="steuerungstechnik">
  <p align="center">&nbsp;</p>
  <p align="right"><img src="http://www.tutorials.de/forum/images/steuerungstechnik.jpg" width="235" height="32" /></p>
</div>
...............
................
</div>
</body>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück