[Erledigt] Hintergrundbild mit Muster fortsetzen

TZP · 14.10.2010, 11:16

Moinz.

Ich hab ein Hintergrundbild, welches von oben nach unten dunkler wird. Hinzu kommen noch diagonale Linien von rechts oben nach links unten...man könnte auch "schraffiert" dazu sagen.

Jetzt soll sich das Bild verlängern, wenn die Seite mehr Inhalt darstellen muss. Da wäre es doof, wenn das Bild von vorne anfängt, weil man ja den Unterschied sieht.

Meine Überlegung wäre die letzten 5 Zeilen des Bildes immer wieder unten anzupappen, wenn es tiefer geht....aber es hapert noch an einer sinnvollen Umsetzung.

Hat jemand so was schon mal gemacht oder einen Tipp dazu?

-bedank-
TZP

Asipak · 14.10.2010, 11:21

Ich habe sowas selbst noch nicht umgesetzt, daher nur eine spontane Idee: Die Grafik mit dem Verlauf als Hintergrund oben-bündig ausrichten (Wiederholung nur in x-Richtung) und die Grafik, die bis nach unten fortgesetzt werden soll, als Hintergrund einer zweiten Ebene festlegen und in x- und y-Richtung fortsetzen lassen. Die zweite Ebene muss dann unter der Ersten liegen.

Keine Ahnung, ob das die richtige Methode ist.

draco88 · 14.10.2010, 11:22

Du kannst einem Element immer nur ein Hintergrund-Bild geben und dieses wird entweder wiederhohlt, oder auch nicht.
So wie du was machen willst ist es ein bisschen komplizierter. Versuchs mal so:

HTML-Code:

<style type="text/css">
.bg1, .bg2 { height: 100%; width: 100% }

.bg1 { background: white url('verlauf.png') repeat-x }
.bg2 { background-image: url('streifen.png') }
</style>
<div class="bg1">
    <div class="bg2">
        Inhalt
    </div>
</div>

14.10.2010, 11:25

Ähm, noch eine Möglichkeit: Erstelle eine Grafik, die von oben nach unten dunkler wird, aber nur bis zur Mitte. Im unteren Teil gehts dann von dunkel Richtung hell. Du hast dann zwar eine doppelt so große Grafik, aber einen sauberen Verlauf.

Asipak · 14.10.2010, 11:26

Der Effekt wäre dann doch aber ein Anderer als der Gewünschte!?

TZP · 14.10.2010, 11:28

Is nich ganz ohne. Ich hab jetzt von der Grafik von ganz unten einen 5px breiten und 1px hohen Schnipsel ausgeschnitten, ihn in 5 verschiedene Difs gepackt und jeweils um einen Pixel nach links verschoben.

Code:

.lastLine1			{ background: url(../img/backgroundLastLine.gif) repeat; height: 1px; }
.lastLine2			{ background: url(../img/backgroundLastLine.gif) repeat; height: 1px; position: relative; left: -1px; }
.lastLine3			{ background: url(../img/backgroundLastLine.gif) repeat; height: 1px; position: relative; left: -2px; }
.lastLine4			{ background: url(../img/backgroundLastLine.gif) repeat; height: 1px; position: relative; left: -3px; }
.lastLine5			{ background: url(../img/backgroundLastLine.gif) repeat; height: 1px; position: relative; left: -4px; }

Das klappt aber nicht so ganz, weil jetzt am Ende rechts unten was fehlt und es links am Rand um 1 bis 4 px überschaut. ^^

14.10.2010, 11:40

Zitat:

Zitat von Asipak

Der Effekt wäre dann doch aber ein Anderer als der Gewünschte!?

Etwas anders auf jeden Fall. Mir ist aber keine Lösung bekannt, die wirklich brauchbar ist. Mit Flash ließe sich da was machen, aber ist auch nicht so toll.

TZP · 14.10.2010, 11:50

So, ich hab´s.
Alle 5px Höhe wiederholt sich das Muster. Also schneide ich mir 5x5px raus und packe es beim body als background rein, mit repeat nach x und y.
Dann ein Haupt-div, wo das normale Bild reinkommt und fertig.

Code:

body                { background: url(../img/bg-pattern.gif); text-align: center; }
.screenBox	      { background: url(../img/background.gif) repeat-x top left; }

Code:

<html>
...
<body>
<div class="screenBox">
...
</div>
</body
</html>

Fertig....wieder was gelernt.

14.10.2010, 11:55

Und das funktioniert mit allen Browsern? Hast du mal einen Link zur Seite?

TZP · 14.10.2010, 13:22

Mit IE und FF auf jeden Fall. Link wird schwer, denn es ist auf meinem Server. ^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
RDM Hintergrundbild weitergeben	Lilith	PHP Tipps 2010	4	04.07.2010 15:29
Hintergrundbild aus CSS-Datei in PHP-Dokument	phim	HTML, Usability und Barrierefreiheit	5	27.10.2009 21:26
Schlüssel eines Array auf Muster überprüfen und kopieren	Crypi	PHP Tipps 2008	10	17.11.2008 16:28
PHP Bilder erstellen -> Hintergrundbild	Nizomi	PHP Tipps 2008	13	02.11.2008 14:06
[Erledigt] CSS: Text auf Hintergrundbild	vita	HTML, Usability und Barrierefreiheit	2	01.11.2008 20:25
Abfrage fortsetzen	max-dhom	PHP Tipps 2006	5	21.06.2006 15:46
Hintergrundbild vollständig anzeigen	Connar	HTML, Usability und Barrierefreiheit	1	12.06.2006 22:45
hintergrundbild ist immer so groß wie der bildschirm	kiffy	HTML, Usability und Barrierefreiheit	1	23.03.2006 16:43
Zufälliges Hintergrundbild	Alienuser	PHP Tipps 2006	7	22.03.2006 21:00
imageCreate - Hintergrundbild hinzufügen	Broadcast	PHP Tipps 2007	12	08.12.2005 16:48
Hintergrundbild bei select feld		HTML, Usability und Barrierefreiheit	7	05.12.2005 13:42
Hintergrundbild eines Formulares mit Javascript ändern!		HTML, Usability und Barrierefreiheit	3	03.11.2005 20:19
hintergrundbild in tabellen		PHP Tipps 2005-2	5	05.06.2005 17:59
[Erledigt] Wie kann man ein hintergrundbild fixieren?		HTML, Usability und Barrierefreiheit	8	27.04.2005 11:31
[Erledigt] <body> Hintergrundbild soll flexibel werden, wie		HTML, Usability und Barrierefreiheit	2	13.09.2004 12:41

14.10.2010, 11:16
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	[Erledigt] Hintergrundbild mit Muster fortsetzen Moinz. Ich hab ein Hintergrundbild, welches von oben nach unten dunkler wird. Hinzu kommen noch diagonale Linien von rechts oben nach links unten...man könnte auch "schraffiert" dazu sagen. Jetzt soll sich das Bild verlängern, wenn die Seite mehr Inhalt darstellen muss. Da wäre es doof, wenn das Bild von vorne anfängt, weil man ja den Unterschied sieht. Meine Überlegung wäre die letzten 5 Zeilen des Bildes immer wieder unten anzupappen, wenn es tiefer geht....aber es hapert noch an einer sinnvollen Umsetzung. Hat jemand so was schon mal gemacht oder einen Tipp dazu? -bedank- TZP


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.10.2010, 11:21
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Ich habe sowas selbst noch nicht umgesetzt, daher nur eine spontane Idee: Die Grafik mit dem Verlauf als Hintergrund oben-bündig ausrichten (Wiederholung nur in x-Richtung) und die Grafik, die bis nach unten fortgesetzt werden soll, als Hintergrund einer zweiten Ebene festlegen und in x- und y-Richtung fortsetzen lassen. Die zweite Ebene muss dann unter der Ersten liegen. Keine Ahnung, ob das die richtige Methode ist.

14.10.2010, 11:22
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Du kannst einem Element immer nur ein Hintergrund-Bild geben und dieses wird entweder wiederhohlt, oder auch nicht. So wie du was machen willst ist es ein bisschen komplizierter. Versuchs mal so: HTML-Code: <style type="text/css"> .bg1, .bg2 { height: 100%; width: 100% } .bg1 { background: white url('verlauf.png') repeat-x } .bg2 { background-image: url('streifen.png') } </style> <div class="bg1"> <div class="bg2"> Inhalt </div> </div>

14.10.2010, 11:25
bandit600 Gast Beiträge: n/a	Ähm, noch eine Möglichkeit: Erstelle eine Grafik, die von oben nach unten dunkler wird, aber nur bis zur Mitte. Im unteren Teil gehts dann von dunkel Richtung hell. Du hast dann zwar eine doppelt so große Grafik, aber einen sauberen Verlauf.

14.10.2010, 11:26
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Der Effekt wäre dann doch aber ein Anderer als der Gewünschte!?

14.10.2010, 11:50
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	So, ich hab´s. Alle 5px Höhe wiederholt sich das Muster. Also schneide ich mir 5x5px raus und packe es beim body als background rein, mit repeat nach x und y. Dann ein Haupt-div, wo das normale Bild reinkommt und fertig. Code: body { background: url(../img/bg-pattern.gif); text-align: center; } .screenBox { background: url(../img/background.gif) repeat-x top left; } Code: <html> ... <body> <div class="screenBox"> ... </div> </body </html> Fertig....wieder was gelernt.

14.10.2010, 11:55
bandit600 Gast Beiträge: n/a	Und das funktioniert mit allen Browsern? Hast du mal einen Link zur Seite?

14.10.2010, 13:22
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Mit IE und FF auf jeden Fall. Link wird schwer, denn es ist auf meinem Server. ^^