nicht angemeldet
Frage zu Hintergrund
Wie füge ich meiner Website einen Hintergrund hinzu, der zwar (wie gewohnt) kontinuerlich und repetitiv verläuft, aber dabei dennoch gewisse Finessen aufweist, die ortspezifisch nur bestimmte Teile des Layouts betreffen?
Du denkst dir: ?
Okay, hier ein Beispiel:
http://www.theportables.com/ weist im Prinzip ein Hintergrund-gif auf, das die Maße 1 x 3 Pixel besitzt (und über den Bildschirm verteilt die grauen Querstreifen ergíbt). Der obere Teil der Seite weist dazu jedoch auch einen Bereich auf, der in orange gehalten ist...
Du denkst dir: !
AUSGEZEICHNET!
Wie kann ich so einen Hintergrund machen?
Wenn irgendwie möglich: so einfach und detailliert wie möglich, bin leider noch unwürdiger Anfänger...
-
ja das sieht gut aus. ist mit CSS gemacht.
-
Hi,
ja das sieht gut aus. ist mit CSS gemacht.
noch etwas genauer... Es wird also dieses nette kleine Bild als wiederholender Hintergrund gesetzt, und das Logo mit Orange oben ÜBER den Hintergrund gelegt - das sieht dann so aus, als wäre es ein Bild, in Wirklichkeit liegt aber das Logo einfach über dem sich wiederholendem Hintergrund. Damit der Übergang vom Logo zu den netten Streifen funktioniert, wird von links bis nach Rechts zusätzlich ein sich auf x-Achse wiederholendes Bild eingebunden, dass oben Orange ist und sich nach unten hin in diese Streifen ausblendet.
Schöne Grüße
Julian--
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
http://derjulian.net
-
-
Hi, Christian.
Okay, hier ein Beispiel:
http://www.theportables.com/ weist im Prinzip ein Hintergrund-gif auf, das die Maße 1 x 3 Pixel besitzt (und über den Bildschirm verteilt die grauen Querstreifen ergíbt). Der obere Teil der Seite weist dazu jedoch auch einen Bereich auf, der in orange gehalten ist...Ein Hintergrundbild gehört immer zu einem Element, also z.B. zu einer Liste, einer Tabelle, einem Textabsatz etc.
Die grauen Streifen im Beispiel sind mit CSS dem <body> zugewiesen. Der orangefarbene Teil einschließlich des Übergangs zu den Grauen Streifen gehört zu einem <div> mit der Klasse "wrapper". Dieses <div> "liegt auf" dem <body> und sein Hintergrund verdeckt die Streifen; deshalb entsteht der Effekt.
Weitere Hinweise:
http://www.theportables.com/styles.css
http://www.theportables.com/Images/back_strip.gif
http://www.theportables.com/Images/back_orange.gifViel Spaß noch.
