Hintergrund

Kiss News · Beitrag von **Kiss News** » 13.10.2005 12:43

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!

Beitrag von **Markus67** » 13.10.2005 12:52

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

Kiss News · Beitrag von **Kiss News** » 13.10.2005 13:21

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...

Beitrag von **Markus67** » 13.10.2005 13:25

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

V1tzl1 · Beitrag von **V1tzl1** » 13.10.2005 17:23

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;">

Valerie Raghnall · Beitrag von **Valerie Raghnall** » 13.10.2005 17:36

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

Beitrag von **Pyramide** » 13.10.2005 22:33

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

Kiss News · Beitrag von **Kiss News** » 14.10.2005 13:53

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">&nbsp;&nbsp; <a
    href="indexEnglish.htm"><img src="flagUK.jpg" width="28" height="17" alt="english version"
    border="0"></a>&nbsp;&nbsp; <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">&nbsp;</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>

fanrpg · Beitrag von **fanrpg** » 14.10.2005 13:59

Hast du Pyramides Tipp begutachtet?
Das funzt so (selbst getestet)

Kiss News · Beitrag von **Kiss News** » 14.10.2005 14:09

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