Also, es gibt doch bestimmt User hier in Lima, die das selbe Problem hatten wie ich:
ein Hintergrundbild sollte a) nur einmal angezeigt werden oder b) an eine bestimmt position gestellt werden...
Nun, ich hab mich mal erkundigt und zeige euch nun hier, wie dass geht:
1. Schritt
Man erstellt ein Css-Skript (um dies zu lernen schaue man hier: http://www.lima-city.de/tutorials.php?mode=show&id=23), und nun gibt es folgende Möglichkeiten:
1.
Man möchte, dass sich der hintergrund nur 1-mal angezeigt wird
2.
Man möchte, dass sich der Hintergrund nur waagerecht/senkrecht wiedeholt
3.
man möchte, dass hinter dem Hintergrundbild noch eine Farbe ist, diese aber nicht in der Html steht
oder
4.
Man möchte das hintergrundbild an einer ganz bestimmten Stelle haben, z.B. in der absoluten Mitte, ganz links/rechts/obern/unten u.s.w...
Ich fange damit ein, ein Hintergrundbild in meinem CSS-Skript festzulegen, dass nur [1]-mal angezeigt wird:
1. Schritt
<style type="text/css">
<!--
body {
background:url(hintergrund.jpg);
background-repeat:no-repeat;
</style>
Mit dem background-repeat:no-repeat; legt man fest, dass das Bild nur einmal angezeigt wird.
Damit haben wir schon einmal ein Hintergrundbild, nun möchten wir aber, dass es sich nur waagerecht ausbreitet/wiederholt:
2. Schritt
<style type="text/css">
<!--
body {
background:url(background.jpg)
background-repeat:repeat-x;
</style>
Nun breitet es sich nur nach Rechts (->) aus... (wenn es sich nur nach unten ausbreiten soll ersetzt man das repeat-x mit repeat-y)
Da man ja immer mehr möchte, soll hinter dem Hintergrundbild noch eine Farbe sein:
3. Schritt
<style type="text/css">
<!--
body {
background:url(banner.jpg)
RGB(0,0,0) ;
background-repeat:no-repeat;
}
-->
</style>
Mit dem RGB(0,0,0) legt man die Hintergrundfarbe fest, in diesem Falle Schwarz...
Nun positionieren wir das Bild:
4. Schritt
<style type="text/css">
<!--
body {
background:url(banner.jpg)
RGB(0,0,0) center 0;
background-repeat:no-repeat;
}
-->
</style>
Mit dem Befehl center 0 wird festgelegt, wo sich das Bild auf dem Bildschirm befindet... Das erste (bei uns center) bezieht sich auf die waagerecht Position, das zweite (bei und 0, wo 0 für 0 Pixel steht) bezieht sich auf die senkrechte Position...
Es gibt noch einen praktischen Befehl für das hintergrundbild, und zwar:
background-attachment:fixed;
Dieser Befehl bewirkt, dass das bild wie eine Art Wasserzeichen in der Seite eingebettet ist, d.h. wenn man auf der Seite scrollt, bleibt das Bild auf der vorher bestimmten Stelle...
Ich hoffe, dass euch dieses Tutorial bei der Gestaltung eurer Internetseite hilfreich war/ist...
Mit freundlichen Grüßen,
euer McBluntslide