PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hintergrund

Gast
2008-03-10, 22:27:40
Hi Leute,
ich möchte für eine Webseite einen Hintergrund mit Verlauf erstellen. Dabei soll ein Verlauf von ~ 800px Höhe nebeneinander wiederholt werden.
Darunter, wenn diese 800px vorbei sind, soll eine andere Grafik in x und y Richtung wiederholt werden.

Ich habe versucht, dem Body das erste Bild zu übergeben. Doch ist der Body nur so groß, wie die aktuelle Seite, sprich bei einem kleinen Fenster wird der Hintergrund abgeschnitten.
Gebe ich einem Div dieses Bild, und setze seine Höhe auf 800Px fest, ist die Seite bei kleineren Browserfenstern (1024) immer mit Scrollbalken dargestellt.

Weiß jemand eine passende Alternative: Ein Hintergrund bestehend aus einer Grafik, 800px hoch, die in x-Richtung wiederholt wird, darunter eine Grafik, die in x- und y-Richtung wiederholt wird, ohne, dass die Seite mind. 800px groß wird, oder ähnliches?
registrierter Gast
2008-03-11, 00:14:23
Wie wäre es, wenn du die beiden Hintergrundbilder übereinander legst?

Als unterste Schicht nimmst du deine Grafik Nr. 2, welche in x- und y-Richtung wiederholt wird.
Die obere Schicht ist dann Grafik Nr. 1, welche die ersten 800 Pixel einnimmt und nur in x-Richtung wiederholt wird. Die Grafik Nr. 1 wird das darunter liegende Bild vollständig verdecken. Erst ab Pixel 800 - wenn Grafik Nr. 1 zu Ende ist - wird man die zweite Grafik sehen.

Das ganze sähe dann so aus:

<div style="background-image:url(hintergrund2.gif);background-repeat:repeat-x;">
<div style="background-image:url(hintergrund1.gif);background-repeat:repeat;">
your content!
</div>
</div>

Wahlweise kann nun noch mittels 'background-position:' die Position der untersten Schicht verschoben werden.
Gast
2008-03-11, 11:03:50
Dann hätte ich glaube ich (ich habs nicht probiert) wieder das Problem, dass der obere Hintergrund nur so groß ist wie "your content". Sprich, ist der Content eine Zeile hoch, dann würde das hintere Bild auch nur 30px oder sowas hoch sein, darunter dann aber schon der x/y-Hintergrund.
Gebe ich dem ersten div die Höhe 800, ist bei einem Einzeilentext bei 1024 schon eine Scrollleiste.
LordZed
2008-03-11, 14:44:47
Dann hätte ich glaube ich (ich habs nicht probiert) wieder das Problem, dass der obere Hintergrund nur so groß ist wie "your content". Sprich, ist der Content eine Zeile hoch, dann würde das hintere Bild auch nur 30px oder sowas hoch sein, darunter dann aber schon der x/y-Hintergrund.
Gebe ich dem ersten div die Höhe 800, ist bei einem Einzeilentext bei 1024 schon eine Scrollleiste.

Meinst du bei einer Höhe von 1024 oder einer Bildschirmauflösung von 1024x768 ^^
Ich glaub ich verstehe grad nicht, wie das ausschauen soll! ^^ Du willst, dass die Grafik immer 800 hoch ist und unter der grafik ein sich wiederholendes Hintergrundbild kommt. Nun soll aber die Grafik bei einem Content das weniger als 800px einnimmt trotztdem 800 Groß sein, aber bei einem Browserfenster das kleiner ist als 800px (so wie ich das mit deinen 1024 jetzt mal verstehe) keine scrollbalken erzeugen, also dann doch abgeschnitten werden? o.0 Oder hab ich jetzt was falsch verstanden?

Vielleicht würden ein paar Screenshots der Problemsituationen und Konzeptbilder wie es aussehen soll weiterhelfen. So hat es für mich den Eindruck als ob du was willst, was für mich irgendwie unlogisch klingt (Verlauf nicht abschneiden, aber bei kleinen Auflösungen auch keine Scrollbars, also dann doch abschneiden (???))
DanMan
2008-03-11, 17:25:02
Das Bild für die x- und y-Richtung verpasst du dem <body>, das für die x-Richtung z.B. einem <div>, das darüber liegt und eine feste Höhe hat. Anders gehts nicht, wenn es 2 Bilder sein müssen.

Für das Scrollbalken Problem gäbs verschiedene Lösungen. Mit einem Schnipsel ECMA-Script Javascript z.B., der das <div> in der Höhe anpasst, wenn der Platz nicht ausreicht. Oder der das BG-<div> rausschmeißt und den <body>-BG dann umschaltet.
Gast
2008-03-11, 17:58:39
http://www.abload.de/thumb/3dc573.png (http://www.abload.de/image.php?img=3dc573.png)

So soll das ganze aussehen. Das rote darf abgeschnitten werden.
lounsome
2008-03-13, 15:35:19
Würde das nicht mit "Frameset rows" funktionieren?

<frameset framespacing="0" border="0" frameborder="0" rows="*,200">

* = automatisch


200 = statisch


Frame1 = roter Bereich
Frame2 = blauer Bereich

somit stellt sich die Seite immer auf die aktuelle Bildschirmauflösung ein.
LordZed
2008-03-14, 09:02:15
Will er denn Frames benutzen? Ich glaube nicht, oder?

Also eigentlich weiß ich auch nicht was da das Problem ist! Du setzt die Grafik, die sich in x- und y-Richtung wiederholen soll als Hintergrundbild ins Body und setzt da nen DIV drüber, dass ne Maximalhöhe hat (also immer 100% der Seite einnimmt bis maximal 800px, so hast du keine Scrollbars bei ner größe unter 800px aber bei ner größeren Auflösung auch nicht mehr als die 800px) und immer die volle Breite. Dort setzt du mit x-Repeat den anderen Hintergrund rein... sollte eigentlich gehen... gibt da soweit ich weiß nen CSS-Style für mit dem du ne Maximalhöhe eines Elementes definieren kannst.
Nur in wiefern das Standart-Konform ist und bei welchen Browsern es das tut weiß ich nicht! ;)
DanMan
2008-03-14, 14:46:28
Frameset bringt ihm nix, wenn die Inhalte nicht getrennt sind, sondern über die ganze Seite gehen.
LordZed
2008-03-14, 15:01:00
Frameset bringt ihm nix, wenn die Inhalte nicht getrennt sind, sondern über die ganze Seite gehen.

Stimmt auch! :) Das interessiert mich jetzt! ^^ werde das gesagte zuhause mal mit CSS ausprobieren! Kann mir nicht vorstellen, dass es so ein großes Problem ist, aber ich kann mich auch irren ^^
Gast
2008-03-21, 12:30:49
Huch, dass hier doch noch Vorschläge kommen:
Nein, so einfach ist es nicht, doch wenn du eine Lösung findest, wäre das super =)
DanMan
2008-03-21, 13:15:43
Huch, dass hier doch noch Vorschläge kommen:
Nein, so einfach ist es nicht, doch wenn du eine Lösung findest, wäre das super =)
Ich hab dir doch eine Lösung geschrieben. Ist dir die zu kompliziert?
Gast
2008-03-22, 10:57:07
Habe ich glatt überlesen und bin auch durch googlen nicht schlauer geworden, was ein ECMA-Script ist?!
darph
2008-03-22, 11:16:14
Habe ich glatt überlesen und bin auch durch googlen nicht schlauer geworden, was ein ECMA-Script ist?!
JavaScript.