background-image in 3 teilen und halbtransparenten .PNGs

[moooo]

Hallo zusammen,

leider bin ich mit CSS3 noch nicht sehr vertraut, da meine letzte homepage schon ein paar Jahre zurückliegt.

Wie oben im Titel schon steht, will ich einen Hintergrund realisieren, der aus 3 Bildteilen besteht. Einem "no-repeat top", einem "repeat-y center" (1px-Streifen) und einem "no-repeat bottom". Die Hintergrundbilder werden auch alle angezeigt und sind richtig positioniert.

Nur leider wird der "repeat-y"-Teil über den GANZEN DIV verlängert, er soll aber nur den Bereich zwischen "no-repeat top" und "no-repeat bottom" ausfüllen. Da alle Bilddateinen halbtransparente .PNGs sind, sieht das gerade gut aus, wenn sich das oben und unten überlagert.

Mit den ganzen Hintergrund-Definitionen von http://www.w3.org/TR/css3-background/ hab ich schon rumgespielt, aber nach wie vor keine änderungen.

Ich hoffe, ihr könnte mir etwas weiterhelfen :-)
Vielen Dank!

gruß mo

[MrSchmidtdtdt]

Hallo,

mit "über den GANZEN DIV verlängert" meinst du vermutlich, dass dein Hintergrund über eine Breite von 100% geht?

Poste doch mal CSS inkl. HTML für dieses Hintergrundelement.

Schonmal vorab: Was spricht dagegen hier 3 <divs> untereinander zu nehmen und jedem einen Hintergrund zu geben? So hättest du zeitgleich eine handfeste Struktur (header,body,footer) und müsstest diese nicht erst nachträglich einarbeiten.

[moooo]

Hallo,

mit 3 <div>s hab ich das Problem nun gelöst, ja. Repeat-y lässt sich (laut einer anderen Antwort) nicht räumlich begrenzen.

mit "über den GANZEN DIV verlängert" meinst du vermutlich, dass dein Hintergrund über eine Breite von 100% geht?

eine Höhe von 100%, aber kommt ja aufs selbe raus :-)

Und danke für deine Antwort!

[Matthias Apsel]

Om nah hoo pez nyeetz, moooo!

Wie oben im Titel schon steht, will ich einen Hintergrund realisieren, der aus 3 Bildteilen besteht.

Grundsätzlich lassen sich mehrere Hintergrundgrafiken in modernen Browsern realisieren. So gehts.

Nur leider wird der "repeat-y"-Teil über den GANZEN DIV verlängert, er soll aber nur den Bereich zwischen "no-repeat top" und "no-repeat bottom" ausfüllen. Da alle Bilddateinen halbtransparente .PNGs sind, sieht das gerade gut aus, wenn sich das oben und unten überlagert.

Nur leider ist es nicht möglich, eine Wiederholung des Hintergrundbildes räumlich zu begrenzen.

Matthias

[moooo]

Hallo,

ok, diese räumliche Begrenzung bräuchte ich, wenn es in einem <div> bleiben soll. Habe jetzt 3 verschiedene <div>s untereinander erstellt mit jeweils einem background-image.

Danke für deine Antwort!

[Oliver E.]

Hi,

Hallo,

ok, diese räumliche Begrenzung bräuchte ich, wenn es in einem <div> bleiben soll. Habe jetzt 3 verschiedene <div>s untereinander erstellt mit jeweils einem background-image.

Vielleicht hilft dir der geschickte Einsatz von border bei deinem Div weiter
Border Image

sonnige Grüße
Oliver

[moooo]

Vielleicht hilft dir der geschickte Einsatz von border bei deinem Div weiter
Border Image

da bin ich auch schon drüber gestolpert und habs mir flüchtig durchgeschaut. Aber im Prinzip ja kein großer Unterschied zu der Realisierung mit den 3 <div>s; bei beiden Varianten kann ich top- und bottom-Part nicht mit dem Text aus dem repeat-Part füllen.
Trotzdem lieben Dank für deine Hilfe!

viele Grüße
moooo

[dave]

Hi,

wenn es sich bei dem "repeat-y"-Bild nur um eine Farbe, einen Verlauf oder etwas ähnlich einfaches handelt könnte man das eventuell analog zu diesem Beispiel lösen.

Eventuell kann man auch background-clip und padding nutzen.

Ob in deinem konkreten Fall eine Möglichkeit besteht? Keine Ahnung, ich kenne ihn nicht.

~dave

[moooo]

wenn es sich bei dem "repeat-y"-Bild nur um eine Farbe, einen Verlauf oder etwas ähnlich einfaches handelt könnte man das eventuell analog zu diesem Beispiel lösen.

Puuuuh, was alles mit CSS3 möglich geworden ist... muss ich mich wohl irgendwann einlesen :-)
Es ist schon ein richtiges .PNG, lässt sich leider nicht mit farben/gradienten lösen.

Eventuell kann man auch background-clip und padding nutzen.

Habe ich versucht, leider nicht möglich (aber vielleicht habe ich mich auch dumm angestellt).
Ich habe nun 3 verschiedene <div>s untereinander erstellt mit jeweils einem background-image. Das geht gerade noch so, da top- und bottom-Grafik schmal ausfallen und es daher nicht auffällt, dass der eigentliche Inhalt erst NACH dem ersten div anfängt ;)

Vielen Dank für deine Antwort!

[dave]

Hi,

wenn es sich bei dem "repeat-y"-Bild nur um eine Farbe, einen Verlauf oder etwas ähnlich einfaches handelt könnte man das eventuell analog zu diesem Beispiel lösen.

Puuuuh, was alles mit CSS3 möglich geworden ist... muss ich mich wohl irgendwann einlesen :-)
Es ist schon ein richtiges .PNG, lässt sich leider nicht mit farben/gradienten lösen.

Mich würde interessieren was ein 1px hohes PNG so besonders macht, dass man es nicht mit CSS nachbauen kann.
Darf ich es sehen?

Ich habe nun 3 verschiedene <div>s untereinander erstellt mit jeweils einem background-image. Das geht gerade noch so, da top- und bottom-Grafik schmal ausfallen und es daher nicht auffällt, dass der eigentliche Inhalt erst NACH dem ersten div anfängt ;)

Dann könntest du das vielleicht ja doch mit background-clip und padding lösen, oder mit, wie von MudGuard vorgeschlagen, ::before/::after.
Ich finde sinnloses Markup immer hässlich.

~dave

[moooo]

Mich würde interessieren was ein 1px hohes PNG so besonders macht, dass man es nicht mit CSS nachbauen kann.
Darf ich es sehen?

Nunja, "besonders" trifft nicht zu. Hier ein Link zu einem Bild, in dem alle 3 Teile enthalten sind (top,repeat,bottom). Den 1px-Streifen kannst du dir ja jetzt denken :-)

http://i.imgur.com/wwvRc.png

Dann könntest du das vielleicht ja doch mit background-clip und padding lösen, oder mit, wie von MudGuard vorgeschlagen, ::before/::after.

hättest du mir eventuell einen guten link für diese "::before/::after"-Technik? Sagt mir gerade gar nichts.

Ich finde sinnloses Markup immer hässlich.

Ich eigentlich auch.

Viele Grüße
moooo

[dave]

Hi,

was spricht dagegen das mit box-shadow, border-radius und background zu lösen?

In etwa so.

~dave

[Steel]

Moin!

was spricht dagegen das mit box-shadow, border-radius und background zu lösen?

In etwa so.

Hast Du auch einen Link der ordentlich funktioniert? Hier bekomme ich nur eine leere Seite. Achso!  Ich bin ja gezwungen, den IE8 zu nutzen... Koennte sowas vielleicht ein Grund sein, das dann doch anders zu machen? ;)

Sorry. Aber als ich ueberhaupt nichts zu sehen bekommen habe, konnte ich nicht widerstehen. :)

[dave]

Hi,

Hast Du auch einen Link der ordentlich funktioniert? Hier bekomme ich nur eine leere Seite. Achso!  Ich bin ja gezwungen, den IE8 zu nutzen... Koennte sowas vielleicht ein Grund sein, das dann doch anders zu machen? ;)

Ja, könnte.
Oder man baut einen Fallback mit ein.
Oder man baut sowas hier mit ein (ich glaube das nennt man polyfill?)

~dave

[Steel]

Hoi,

Hast Du auch einen Link der ordentlich funktioniert? Hier bekomme ich nur eine leere Seite. Achso!  Ich bin ja gezwungen, den IE8 zu nutzen... Koennte sowas vielleicht ein Grund sein, das dann doch anders zu machen? ;)

Ja, könnte.
Oder man baut einen Fallback mit ein.
Oder man baut sowas hier mit ein (ich glaube das nennt man polyfill?)

Ich schrieb bereits, dass ich einfach nicht wiederstehen konnte, als ich nur eine leere graue Seite zu sehen bekam. Klar: fuer ne Demo braucht man kein Fallback. Dein nachtraeglich eingebautes Fallback erfuellt auch seinen Zweck, denke ich. Fuer meine Begriffe waere dein CSS die Loesung dieses Problems.

PIE ist natuerlich eine interessante Alternative.

[dave]

Hi,

Ich schrieb bereits, dass ich einfach nicht wiederstehen konnte, als ich nur eine leere graue Seite zu sehen bekam.

Ich fand gut dass du das angesprochen hattest, denn was für mich (und dich) selbstverständlich ist, kann für moooo ja ein komplett neuer Ansatz sein.

~dave

[Gunnar Bittersmann]

@@Steel:

nuqneH

Klar: fuer ne Demo braucht man kein Fallback.

Oh-oh. Das kommt ganz auf den Zweck der Demo an.

Wenn sie dafür gedacht ist, Fortgeschrittenen die Möglichkeiten aktueller Browser zu zeigen, dann nicht.

Wenn die Demo für Anfänger gedacht ist, die das Gezeigte auf ihrer Seite verwenden wollen, dann braucht die Demo unbedingt einen Fallback.

Fallback muss nicht heißen, das Aussehen auch für veraltete Browser hinzubekommen. Es sollte aber nicht die ostfriesische Nationalflagge (weißer Adler auf weißem Grund) zu sehen sein. Setzen einer Hintergrundfarbe sollte genügen, kein edler visueller Effekt, aber eine brauchbare Seite (progressive enhancement).

Qapla'

[moooo]

Oder man baut einen Fallback mit ein.

Für meine Zwecke lass ich den Fallback mal außen vor, es soll einfach jeder nen aktuell Browser ungleich IE nutzen, dann klappt das auch ;-)
Aber mich würde trotzdem interessieren, welche Fallbacks es gibt (abgesehen von background-color) und warum man sie braucht? Zwar etwas Off-Topic jetzt, aber wenn sich jemand einer Antwort erbarmen würde, wäre das spitze!

Oder man baut sowas hier mit ein (ich glaube das nennt man polyfill?)

Bin ich richtig in der Annahme, dass PIE ein AddIn für den IE ist? Sprich man lädt sich das runter, installiert es auf seinen IE, und dann können alle CSS3-Definitionen die sich auf PIE beziehen
(etwa: "-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);")
angezeigt werden?

[dave]

Hi,

Für meine Zwecke lass ich den Fallback mal außen vor, es soll einfach jeder nen aktuell Browser ungleich IE nutzen, dann klappt das auch ;-)
Aber mich würde trotzdem interessieren, welche Fallbacks es gibt (abgesehen von background-color) und warum man sie braucht? Zwar etwas Off-Topic jetzt, aber wenn sich jemand einer Antwort erbarmen würde, wäre das spitze!

Als Fallback für nicht unterstützte CSS-Eigenschaften und Werte (wie hier z.B. rgba() als Hintergrundfarbe) hat man nur die Möglichkeit andere CSS-Eigenschaften und Werte zu verwenden.
In diesem Beispiel eine Hintergrundfarbe ohne Alpha-Kanal. Man könnte hier auch stattdessen ein Hintergrundbild (mit Transparenz) verwenden.

Was genau als Fallback sinnvoll ist hängt immer vom Fall ab.

Bin ich richtig in der Annahme, dass PIE ein AddIn für den IE ist? Sprich man lädt sich das runter, installiert es auf seinen IE, und dann können alle CSS3-Definitionen die sich auf PIE beziehen
(etwa: "-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);")
angezeigt werden?

Nein.
Es muss nichts installiert werden.

Einfach im CSS die Zeile mit dem behavior und deine normalen CSS-Angaben (Ausnahme background, da -pie-background).

Wie genau das funktioniert und was es macht steht auf http://css3pie.com beschrieben. Da ist auch ein Beispiel auf der Startseite, kannst ja mal mitm IE Version "alt" drauf gehen und anschauen.

~dave

[moooo]

Nein.
Es muss nichts installiert werden.

Einfach im CSS die Zeile mit dem behavior und deine normalen CSS-Angaben (Ausnahme background, da -pie-background).

Wie genau das funktioniert und was es macht steht auf http://css3pie.com beschrieben.

Ja hast recht, ich hätte es lesen können und sollen. Zur Vollständigkeit halber: man muss die PIE.htc noch ins Website-Verzeichnis hochladen.

Da ist auch ein Beispiel auf der Startseite, kannst ja mal mitm IE Version "alt" drauf gehen und anschauen.

Für euch Webentwickler bestimmt unabkömmlich, um ein breiteres Publikum zu erreichen, für mich:

[Steel]

Hi!

Bin ich richtig in der Annahme, dass PIE ein AddIn für den IE ist? Sprich man lädt sich das runter, installiert es auf seinen IE, und dann können alle CSS3-Definitionen die sich auf PIE beziehen
(etwa: "-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);")
angezeigt werden?

Jain. PIE ist kein Plugin sondern ein htc File (HTML Component File). Das ist ein Scriptfile, das vom IE per behaviour eingebunden werden kann. Das heisst es enthaelt Javascript, das die Elemente manipuliert. Ist ne IE only Sache. Du musst das File auf deinem Server zur Verfuegung stellen. Das wird dann aehnlich Javascriptfiles nachgeladen und ausgefuehrt.

[dave]

Hi,

Dann könntest du das vielleicht ja doch mit background-clip und padding lösen, oder mit, wie von MudGuard vorgeschlagen, ::before/::after.

hättest du mir eventuell einen guten link für diese "::before/::after"-Technik? Sagt mir gerade gar nichts.

http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement/before,_after

Die mit ::before/::after erzeugten Pseudo-Elemente kannst du dann vom Prinzip genauso wie die von MrSchmidtdtdt empfohlenen zusätzlichen div-Elemente stylen.
Du musst nur bedenken, dass diese nicht vor und nach dem Element eingefügt werden, sondern als erstes bzw. letztes _in_ diesem Element. D.h. du müsstest die noch mit negativen margins oder position relative/absolute außerhalb positionieren.

~dave

[moooo]

Die mit ::before/::after erzeugten Pseudo-Elemente kannst du dann vom Prinzip genauso wie die von MrSchmidtdtdt empfohlenen zusätzlichen div-Elemente stylen.
Du musst nur bedenken, dass diese nicht vor und nach dem Element eingefügt werden, sondern als erstes bzw. letztes _in_ diesem Element. D.h. du müsstest die noch mit negativen margins oder position relative/absolute außerhalb positionieren.

Okay, das habe ich verstanden. Nur gibt es - wenn ich das richtig erkannt habe - keinen Vorteil gegenüber der Variante mit 3 separaten <div>s, oder?
Eventuell spart man sich im HTML etwas Code mit den Pseudo-Elementen, aber im CSS wird das mit den ganzen negativ-margins etc wieder ausgeglichen.
Oder lieg ich da falsch?

grüße
moooo

[dave]

Hi,

Okay, das habe ich verstanden. Nur gibt es - wenn ich das richtig erkannt habe - keinen Vorteil gegenüber der Variante mit 3 separaten <div>s, oder?
Eventuell spart man sich im HTML etwas Code mit den Pseudo-Elementen, aber im CSS wird das mit den ganzen negativ-margins etc wieder ausgeglichen.
Oder lieg ich da falsch?

Wenn es dir darum geht möglichst wenig Code zu haben kommst du mit den div-Elementen eventuell besser weg.
Allerdings geht dann auch die Trennung von Auszeichnung des Inhalts (HTML) und Angaben zur Darstellung (CSS) verloren.

Und so viel mehr CSS ist das nun auch wieder nicht.

~dave

[MudGuard]

Hi,

Wie oben im Titel schon steht, will ich einen Hintergrund realisieren, der aus 3 Bildteilen besteht. Einem "no-repeat top", einem "repeat-y center" (1px-Streifen) und einem "no-repeat bottom". Die Hintergrundbilder werden auch alle angezeigt und sind richtig positioniert.

Nur leider wird der "repeat-y"-Teil über den GANZEN DIV verlängert, er soll aber nur den Bereich zwischen "no-repeat top" und "no-repeat bottom" ausfüllen. Da alle Bilddateinen halbtransparente .PNGs sind, sieht das gerade gut aus, wenn sich das oben und unten überlagert.

evtl. das obere Bild in ::before, das untere Bild in ::after und das mittlere Bild im div unterbringen.

cu,
Andreas

[moooo]

Hallo,

evtl. das obere Bild in ::before, das untere Bild in ::after und das mittlere Bild im div unterbringen.

damit habe ich leider keine Erfahrung.

Mit 3 <div>s hab ich das Problem nun gelöst, da sich der "repeat-y"-Teil nicht räumlich begrenzen lässt (laut einer anderen Antwort)

Und danke für deine Antwort!

[Gunnar Bittersmann]

@@moooo:

nuqneH

einem "repeat-y center" (1px-Streifen)

Warum ein 1px-Streifen äußerst ungünstig ist, kannst du in http://forum.de.selfhtml.org/archiv/2009/7/t188832/#m1257506 f. und http://forum.de.selfhtml.org/archiv/2009/12/t193846/ nachlesen.

Qapla'

[moooo]

Warum ein 1px-Streifen äußerst ungünstig ist, kannst du in http://forum.de.selfhtml.org/archiv/2009/7/t188832/#m1257506 f. und http://forum.de.selfhtml.org/archiv/2009/12/t193846/ nachlesen.

Das ist interessant! Danke schonmal für die Info und Links!
Nun, mein 1px-Streifen (610px lang, PNG) ist schon 2,89KB groß, was nun?

Kommando zurück!

Gerade mit Smush.it von Yahoo oben genanntes PNG "gesmusht":
"Smushed 91.78% or 2.66 KB from the size of your image"
Jetzt ist die Datei 244 BYTES groß, WOW!
Gut, jetzt macht es natürlich Sinn, die Höhe so lange zu erhöhen bis 2KB überschritten werden. Richtig?

Die Metadaten des Bildes (zumindest bei PNGs) sind selbst bei verschieden großen PNGs gleich groß. Bei einem 500KB-PNG hat es gestern auch etwa 2,5KB durch Smush.it eingespart.
Stimmt die Vermutung?
Ist das auch bei anderen Bildformaten so?