Seite 1 von 3
Hintergrund
Verfasst: 13.10.2005 12:43
von Kiss News
Hallo!
Habe eine Frage zum Hintergrundbild bei
www.sushimaterial.com
Kann mir bitte jemand sagen, mit welchem Script (Javascript?) ich es machen kann, dass das Hintergrungbild (Berg) immer komplett erscheint auch bei großer Bildschirmdarstellung, und dass das Hintergrundbild auch immer zentriert ist?
Danke!
Verfasst: 13.10.2005 12:52
von Markus67
Hi ...
das kannst du über die css-Datei entsprechend einstellen.
background-position: center top
Damit wird das Hintergrundbild horizontal mittig und vertikal oben angezeigt.
Markus
Verfasst: 13.10.2005 13:21
von Kiss News
Danke für die Info.
Könntest Du mir vielleicht sagen, wie der Code dann aussehen soll, oder wo ich die genauen Infos dazu finden kann? Und das Foto sollte nicht wiederholt werden (no-repeat), aber irgendwie kriege ich das nicht hin, da ich nicht programmieren kann
Momentan sieht es so aus:
<body background="FujiHintergrundbild.jpg" onload="dynAnimation()">
so scheint es nicht zu funktionieren:
<body background="FujiHintergrundbild.jpg" onload="dynAnimation()"
background-position="center top">
und so auch nicht:
<body background="FujiHintergrundbild.jpg" onload="dynAnimation()" background-position:
center top>
und dann soll das Hintergrundbild auch immer ganz zu sehen sein, sich also automatisch an die Bildschirmdarstellung anpassen...
Verfasst: 13.10.2005 13:25
von Markus67
Hi ...
hat das onload="dynAnimation() irgendwas mit dem Hintergrundbild zu tun oder ist das was anderes?
Eine automatische Bildanpassung bekommst du mit css nicht hin, damit funktioniert lediglich die Postitionierung.
Markus
Verfasst: 13.10.2005 17:23
von V1tzl1
Hallo, also ich glaube, dass die skalierung des hintergrundbildes nicht so einfach gaht. allerdings die positionierung.
Dein Problem ist es, dass du es mit html befehlen versucht hast, wie oben jedoch schon erwähnt, brauchst du css, also einfach so
<body background="bg.jpg" style="backgrount-position:center top;">
Verfasst: 13.10.2005 17:36
von Valerie Raghnall
Was Markus meint ist einfach die fixe Positionierung des Hintergrundes, nicht die Skalierung.
Wenn du dieses dynanimation nehmen willst, musst du auch das Script mit einbauen, das im Quellcode der Indexdatei der von dir verlinkten Seite eingebaut ist. Ansonsten wird da nix draus
Verfasst: 13.10.2005 22:33
von Pyramide
CSS:
Code: Alles auswählen
body {
padding: 0;
margin: 0;
}
#background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#content {
position: relative;
z-index: 2;
padding: 1em;
}
HTML:
Code: Alles auswählen
...
<body>
<img id="background" src="bild.png">
<div id="content">
<!--Hier den Inhalt der Seite-->
</div>
</body>
</html>
Unterstützen auch alle aktuellen Browser. Alle Browser? Nein, ein kleiner Internet Explorer aus Redmond leistet immer noch Widerstand gegenüber Standards wie CSS
Verfasst: 14.10.2005 13:53
von Kiss News
Danke für Eure Hilfe und Hinweise.
das
onload="dynAnimation() hat Front Page 98 automatisch eingefügt, hat wohl etwas damit zu tun, dass der Text "englisch" von rechts eingeschoben erscheint. Wenn ich das wegmache, ist der Code auch weg...
Ich habe es leider nicht hinbekommen, egal wie ich es versuche, es funktioniert nicht
Mein Code der Seite sieht so aus:
Code: Alles auswählen
<html>
<head>
Das allerwichtigste wäre, dass das Hintergrundbild flächendeckend zu sehen ist, auch bei großer Bildschirmdarstellung...
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Euro Handel Sushimaterial.com</title>
</head>
<body background="FujiHintergrundbild.jpg">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td style="padding-left: 2; padding-right: 2; padding-top: 15" valign="top"> <a
href="indexEnglish.htm"><img src="flagUK.jpg" width="28" height="17" alt="english version"
border="0"></a> <font face="Arial Black">english</font> <br>
<br>
</td>
<td style="padding-left: 2; padding-right: 2; padding-top: 15" valign="top"><p
align="center"><a href="Produkte.htm"><img src="Produkteklein.gif" width="89" height="26"
alt="Produkte" border="0"></a><a href="Angebote.htm"><img src="Angeboteklein.gif"
width="89" height="26" alt="Angebote" border="0"></a><a href="Rezepte.htm"><img
src="Rezepteklein.gif" width="74" height="26" alt="Rezepte" border="0"></a><a
href="Kontakt.htm"><img src="Kontaktklein.gif" width="79" height="26" alt="Kontakt"
border="0"></a><a href="UeberUns.htm"><img src="Ueberunstklein.gif" width="79" height="26"
alt="über uns" border="0"></a></td>
<td style="padding-left: 5; padding-right: 35; padding-top: 15" valign="top"><p
align="right"><img src="EuroHandelLogo.gif" width="108" height="58"
alt="Sushimaterial.com"><img src="EuroHandelLogoSchrift.gif" width="188" height="58"
alt="Euro Handel"></td>
</tr>
<tr>
<td style="padding-left: 17; padding-right: 35; padding-top: 15" valign="bottom"
colspan="3"><p align="center"> </p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%"></td>
<td width="33%"><img src="jeong%20reis%20v2transparent.gif" alt="Sushimaterial.com"
width="536" height="340"></td>
<td width="34%" valign="bottom"><p align="right"><a href="Jobs.htm"><img
src="ButtonJobs.gif" width="51" height="26" alt="Jobs" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Verfasst: 14.10.2005 13:59
von fanrpg
Hast du Pyramides Tipp begutachtet?
Das funzt so (selbst getestet)
Verfasst: 14.10.2005 14:09
von Kiss News
ja, kriege beides nicht hin...
wo genau soll ich den CSS Code hinschreiben? Der erscheint bei mir immer im Bild...
Soll mit dem Internet Explorer aber auch funktionieren