Hintergrundbild transparent

[Pez]

Hallo.

Mein Link:
The Green Veltleen

Mein Problem ist, dass sich die Navigation an diesem orangen Stern richtet und darunter gestellt wird. Dh. der Stern müsste transparent sein. Ich hab gelesen, dass die "background-image" in CSS als Standard transparent eingestellt haben. Gibt es da noch eine andere Einstellung.

Ausschnitt aus der CSS Datei:

#header_top {
margin-top: 0em;
background-image:url(../fileadmin/bilder/header.gif);
background-repeat: no-repeat;
width: 841px;
height: 117px;
float:left;
}

#forum_stern {
margin-left: 52.5em;
background-image:url(../fileadmin/bilder/forum_stern.gif);
background-repeat: no-repeat;
width: 185px;
height: 178px;
}

[MudGuard]

Hi,

Mein Problem ist, dass sich die Navigation an diesem orangen Stern richtet und darunter gestellt wird. Dh. der Stern müsste transparent sein. Ich hab gelesen, dass die "background-image" in CSS als Standard transparent eingestellt haben.

Nein, die default-Einstellung für background-image ist none.

Wenn Du ein transparentes Hintergrundbild haben willst, mußt Du das Bild im Graphikprogramm transparent machen.

cu,
Andreas

[Pez]

Hab die beiden Bilder jetzt im Photoshop unter "Für Web speichern" in png24 umgewandelt und transparenz angeklickt.

Ändert da aber leider auch nichts.

[Peter Pan]

Hi!

Hab die beiden Bilder jetzt im Photoshop unter "Für Web speichern" in png24 umgewandelt und transparenz angeklickt.

Ändert da aber leider auch nichts.

Hat Deine Grafik denn auch einen transparenten Hintergrund?

off:PP

[Pez]

Nein nein, benutze Mozilla Firefox.

@Peter Pan: Ich weiß jetzt ganz was du meinst mit dem Hintergrund.

[Auge]

Hallo

Nein nein, benutze Mozilla Firefox.

@Peter Pan: Ich weiß jetzt ganz was du meinst mit dem Hintergrund.

falschrum geantwortet ;-)

Bei PNG hast du zwei Möglichkeiten der Transparenz. Die eine gleicht dem Verhalten bei GIF, nämlich in einem Palettenbild (bis 256 Farben) eine Farbe als transparent zu definieren, die andere ist die Alphatransparenz, bei der in einem 16.7-Mio.-Farben-Bild auch ein Transparenzverlauf möglich ist. Das heißt, es sind Teiltranparenzen machbar, die in 256 Stufen von nichttransparent zu transparent verlaufen können.

Lies dazu bitte den SELFHTML-Artikel zu teiltransparenten Bereichen, besonders den Abschnitt zur Teiltransparenz mittels einer PNG-Grafik.

Tschö, Auge

[Auge]

Hallo

Hab die beiden Bilder jetzt im Photoshop unter "Für Web speichern" in png24 umgewandelt und transparenz angeklickt.

Ändert da aber leider auch nichts.

Abgesehen von deinem Vorgehen und deinen Einstellungen im Grafikprogramm, benutzt du zum testen den MSIE6? Der kann mit Alphatransparenz, wie sie bei 24-Bit-PNGs möglich ist, nichts anfangen.

Tschö, Auge

[Cheatah]

Hi,

Ich hab gelesen, dass die "background-image" in CSS als Standard transparent eingestellt haben. Gibt es da noch eine andere Einstellung.

"transparent" ist der Default-Wert für background-color, nicht für background-image. Wie eine Grafik aussieht, definiert die Grafik; CSS verändert diese nicht. Schlussfolgerung: siehe MudGuards Posting.

Cheatah

[zaphod1984]

Mein Problem ist, dass sich die Navigation an diesem orangen Stern richtet und darunter gestellt wird. Dh. der Stern müsste transparent sein.

ich glaube abgegebenen antworten treffen etwas am ziel vorbei.
wenn ich dich richtig verstanden habe möchtest du dass deine navigation direkt unter dem grünen querbalken los geht, richtig?
und dass die tatsache dass der stern vom design her über den grünen balken hinaus geht den abstand zwischen balken und navigation vergrößert, richtig?

falls ja, dann hilft dir transparenz gar nichts, du musst den stern in zwei teile schneiden und den unteren teil als hintergrund der navigationsbox setzen.
(eine der möglichkeiten, gibt noch mehr...)

[Auge]

Hallo

»» Mein Problem ist, dass sich die Navigation an diesem orangen Stern richtet und darunter gestellt wird. Dh. der Stern müsste transparent sein.

ich glaube abgegebenen antworten treffen etwas am ziel vorbei.

falls ja, dann hilft dir transparenz gar nichts, du musst den stern in zwei teile schneiden und den unteren teil als hintergrund der navigationsbox setzen.
(eine der möglichkeiten, gibt noch mehr...)

Eine andere wäre, ein Bild oder ein Element mit dem Bild als Hintergrund an gewünschter Stelle auf der Seite zu positionieren, so dass es unabhängig von den darunterliegenden Elementen bleibt. Und schon sind wir genau da, wo die anderen Antworten hinzielen.

Tschö, Auge

[zaphod1984]

Eine andere wäre, ein Bild oder ein Element mit dem Bild als Hintergrund an gewünschter Stelle auf der Seite zu positionieren, so dass es unabhängig von den darunterliegenden Elementen bleibt. Und schon sind wir genau da, wo die anderen Antworten hinzielen.

Das vordringliche Problem des Threadstarters schien mir aber eher dass der Stern Platz wegnimmt.
Da kann er das Bild von mir aus komplett transparent machen, hilft leider nichts.

Wenn er den unteren Teil des Sterns in ein extra Element auslagert muss er den Hintergrund natürlich transparent machen, ja.

[MudGuard]

Hi,

Das vordringliche Problem des Threadstarters schien mir aber eher dass der Stern Platz wegnimmt.

Ich hatte ihn so verstanden, daß es ihn stört, daß

den Stern überlagert.
(wobei da natürlich die Frage ist, warum er das Bild so breit macht, daß es den Stern überlagert - wenn das Bild einfach nur ca. 40*530 Pixel groß wäre und links unten im Element platziert wäre, ohne repeat, bestünde das Problem der Überlagerung nicht...)

Oder noch besser: das 40*530-Pixel-große Bild als img-Element einfügen - mit entsprechendem Alt-Text. Dann sehen auch bild-freie Clients (Blinde, Suchmaschinen-Robots, ...) den Text.

cu,
Andreas