Bright Side of Life - Transparenz im Headerphoto

Begonnen von Metal-Overdrive, 24 März 2009, 22:53:28

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 2 Gäste betrachten dieses Thema.

Metal-Overdrive

Hallo,

bin gerade mal wieder ein wenig am experementieren und verbringe schon den ganzen Abend an einem kleinen Problem.

Ich würde gerne bei dem Bright Side of Life Theme das Headerphoto ein wenig abändern. Und zwar so das gewisse Bereiche tranzparent sind und das bg.gif, sprich der Hintergrund zu sehen sind.

Habe dazu aus dem originalem Headerphoto einige Bereiche ausgeschnitten und diese tranzparent gemacht. Das ganze habe ich nun als png abgespeichert.

Den Aufruf des Bildes in der settings.php habe ich natürlich in headerphoto.png abgeändert. Nun werden allerdings alle zuvor von mir tranzparent gemachten Bereiche nur in "weiß" dargestellt.

Ich vermute das ich in der layout.css auch noch einen Bereich hierfür abändern muss, finde ihn aber nicht. Ich habe ja den Bereich #content-wrap in Verdacht, weil wenn ich hier mal den Farbwert von #ffffff in #000000 ändere wird der weiße Bereich auch tatsächlich in schwarz getüncht, aber transparenz bekomme ich hier nicht wirklich hin.

Kann mir da mal bitte jemand einen Tip geben?

martin b

Hallo

Transparenz bekommst du nur mit GIF Dateien hin. Also das Ganze als GIF abspeichern und die settings.php erneut abändern.

Gruß

martin b

xmjay

Hi Metal-Overdrive !

Soviel ich weiss, gibts in der *.png Darstellung im IE ab und an Probleme.
Falls Du Dir die Seite mippm IE angesehen hast, schaus Dir mal die Seite mit nem andern Browser an (z.B. FF  :BD:).
Oder das *.png wurde als PNG-8 gespeichert (unterstützt keine Transparenz).

ZitatAlso das Ganze als GIF abspeichern und die settings.php erneut abändern.
Könnte klappen  :smile:

Wenn das nicht hilft, ist folgendes interassant:
Mit welchem Grafikprogramm arbeitest Du / wurde die Grafik erstellt.
Bei z.B. Photoshop läßt sich die Transparenz vorm speichern einstellen.

Zitat von: martin b am 24 März 2009, 23:26:32
Transparenz bekommst du nur mit GIF Dateien hin.

Nein.
*.png-Dateien können Transparenz darstellen.
klick mich
CMS-Version: pragmaMx 1.12.3 | PHP-Version: 5.2.12 | MySQL-Version: 5.1.66

Metal-Overdrive

Hallo ihr zwei. Erstmal danke das ihr euch mir annehmt.

Ich glaube ich hab mich da vielleicht etwas kompliziert ausgedrückt. Die Bearbeitung des Bildes ist nicht das Problem.

Ich hab euch mal kurz ganz schnell 2 Grafiken fertig gemacht und angehängt. Denke die erklären mein Problem besser.

Egal welchen Farbwert ich auch in die #content-wrap schreibe, dieser wird auch dargestellt - heißt für mich das die Tranzparenz vorhanden ist (Habe gif wie auch png getestet im FF). nur wenn ich die background-color nun auskommentiere oder ihr den Wert transparent gebe ist besagter Bereich trotzdem weiß...?

xmjay

Hi again !

Sorry for falsch Verstehing !
Habs auf my Testseite nachgebaut, komme an der Stelle auch nicht weiter  :gruebel:
CMS-Version: pragmaMx 1.12.3 | PHP-Version: 5.2.12 | MySQL-Version: 5.1.66

reddragon

hi :)

also ich verstehe dich richtig, und du willst den dunkel blauen Streifen, in der verlängerung des Bildes als Hintergrund?

ich habe mich gerade mal ein bisschen damit beschäftigt, und ich glaube das Problem ist folgendes:
Der dunkelblaue Streifen ist eine kombinierte Grafik aus dem Weiß von oben, dem grünen Streifen, dann dem dunkelblauen Streifen, und unten der graue Rand. Daraus ist der Hintergrund gestaltet(bg.gif). Der eigentliche Inhalt (Header blöcke content und co) setzt seperat auf dem Hintergrund auf, und zwar als weißes Element, in dem oben die Überschrift, und die Tabs sind, und dadrunter die Grafik und der Inhalt kommen. Und hier kommt auch eine eigene Grafik zum tragen(headerbg.gif), die oben aus dem weiß, und dadrunter aus dem grün besteht, unter der dann auf weißem Grund das Bild und so weiter angeordnet sind.

Wenn ich das so auf die schnelle richtig interpretiere, wirst du die Fäche hinter dem Bild nicht so ohne weiteres Tranzparent bekommen, außer du würdest das gesammte Feld erwischen, und in diesem mehrere wieder weiß gefärbte Inseln einbauen.


Was aber gehen würde, wäre, wenn du in der CSS beim #content-wrap folgende änderung vornimmst:
das hier raus:
background-color: #ffffff;
und dann das dafür rein:
background-image: url(../images/bg2.gif);

dann müsstest du halt nur eine weitere Hintergrund-grafik einbauen:bg2.gif

Metal-Overdrive

Zitat von: reddragon am 25 März 2009, 17:14:43
Was aber gehen würde, wäre, wenn du in der CSS beim #content-wrap folgende änderung vornimmst:
das hier raus:
background-color: #ffffff;
und dann das dafür rein:
background-image: url(../images/bg2.gif);

dann müsstest du halt nur eine weitere Hintergrund-grafik einbauen:bg2.gif

So, habe deinen Tip mit der bg2.gif einmal ausprobiert, sieht aber nur aus wenn man einen einfarbigen Hintergrund hat und nicht so wie ich ein Muster. Dann sieht man das nämlich immer beim scrollen das das nicht zusammengehört.