Betreff: Keine Transparenz trotz PNG

de-n-klein · ‎02-17-2020

Hallo ihr lieben 🙂

Für die Produktseite unserer Stores habe ich die Produkte in Photoshop feinsäuberlich freigestellt und als PNG hochgeladen. Allerdings ist die Darstellung nun automatisch mit einem weißen Hintergrund und nicht in der Hintergrundfarbe vom <body>.
Weiß einer, wie ich das Einstellen kann?Das Farbprofil habe ich bereits entfernt bzw. in sRGB gesetzt.

Eure Unterstützung hilft mir sehr, lieben Dank im vorraus 🙂

Gabe · ‎02-19-2020

Hey @de-n-klein

Gabe aus Shopify hier!

Hier gibt es ein paar hilfreiche Seiten zum Thema CSS und "Image Opacity".

VG,

Gabe

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

CJ129 · ‎08-09-2021

Ich habe das gleiche Problem.

Mein logo ist grau hinterlegt obwohl es eine PNG ist.

Und sorry aber die Antwort mit hilfreiche Seiten war mal so garnicht hilfreich!!

CJ129 · ‎08-10-2021

Alles gut, danke für die Hilfe ich habe den shop einfach nochmal gebaut und
jetzt ging es auch. Ich hoffe es kommt nicht wieder sonst versuche ich mal
deine Lösungsansätze, Dankeschön

LG

r8r · ‎08-16-2021

… wir hatten kürzlich einen ganz ähnlich gelagerten Fall und haben's mit derselben wie von @Ben310 geposteten Regel wegbekommen, allerdings benötigten wir aufgrund der Spezifizität das !important Flag. Wenn Du ohne dem auskommst, dann wär's natürlich besser:

.site-header__logo img {
    background-color: transparent !important;
  }

Ein Link und mehr an Infos wär natürlich schon ein Hit …

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
★ Studio Mitte

paradiesvogel · ‎12-02-2021

Ich habe jetzt dasselbe Problem obwohl es bisher nicht der Fall war @r8r

Danke für deine Antwort

Wo muss ich den Code denn einfügen?

.site-header__logo img {
background-color: transparent !important;
}
Wo finde ich eine Anleitung dazu?

Danke vorab.

r8r · ‎12-02-2021

@paradiesvogel – schau, bezugnehmend auf diesen Beitrag, kann ich mir's als Vollzeitunternehmer mittelfristig nur erlauben hier pro-bono Unterstützung anzubieten, wenn das vom Gegenüber auch geschätzt wird. In dem Fall sagt mir mein Bauchgefühl, dass die Augenhöhe nicht gegeben ist – ich bin mir aber sicher, dass Google oder jemand, der das günstig macht, diese Frage schnell beantworten kann.

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
★ Studio Mitte

Gabe · ‎12-02-2021

@paradiesvogel

Wenn du deine Shop URL hier postest können wir zumindest Tipps abgeben. Welches Bild möchtest du den verbessern? Hast du das mit deinem "Freelancer" machen können, wie im anderen Leitfaden erwähnt?

Eine Anleitung für eigene Anpassungen der Bilder gibt es im Help Center nicht (ausser diese hier und hier) da dies außerhalb unseres Support Bereiches liegt (wird also nicht als Teil des Design Time angeboten wenn du ein Shopify Theme verwendest) und somit wäre hier ein Experte im Bereich Graphic Design oder Fotografie der beste Ansprechpartner.

Möchtest du ein Bild mit transparenten HG hochladen, es wird aber nicht so angezeigt wie du es erwartest? Wenn man versucht verschiedene Arten von Bilder hochzuladen, wie .jpg, .png mit transparenten Hintergrund und auch animierte .gif dann gibt es ein paar Dinge zu beachten (siehe unten).

Hier ist zum Beispiel zu beachten, wie der .png mit transparenten Hintergrund im externen Bildeditor erstellt und optimiert wurde denn manche Bildeditor die .png mit transparenten Hintergründe erstellen können, speichern die Bilder in einem nicht-erlaubten Format (es gibt in der Tat mehrere Formate mit Alphakanal, wie z. B. bestimmte Arten von Vector Graphics usw.) und somit ist es möglich, dass das System das Bild in ein .jpg verwandelt, um es speichern zu können. Aber der Mario @r8r kann das natürlich bestätigen oder widerlegen.

Weiterer Grund

Wenn eine Sammlung vorher zuvor eine JPG-Bilddatei hatte und man versucht, diese durch eine PNG-Datei (oder einen anderen Dateityp als JPG) zu ersetzen, wandelt das System den Dateityp automatisch in JPG um, um eine Übereinstimmung mit dem vorherigen Upload zu gewährleisten. Dies kann auch in anderen Bereichen des Shops geschehen.

Wenn man versucht, ein Sammlungs-/Blog-/Geschenkkartenbild hochzuladen, das neue Bild aber nicht wie erwartet als .png mit transparenten HG angezeigt wird, dann probiere bitte folgende Schritte:

Das Bild löschen, und die Seite speichern.
Das neue Bild erneut hochzuladen.
Das Bild sollte beim 2. oder 3. Versuch als .png gespeichert werden.

Das kann bei einer PNG-Datei oder bei einer optimierten GIF-Datei passieren.

Um den Dateityp zu überprüfen, öffne die Seite in der Verwaltung, auf der das neue Bild hochgeladen wird, klicke mit der rechten Maustaste auf das Bild und wähle Bild in neuem Tab öffnen. In der URL wird je nach Dateityp .png oder .jpg angezeigt.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

paradiesvogel · ‎12-02-2021

Vielen Dank für schnelle Antwort.

Ich möchte vor erstmal keinen Freelancer einstellen oder beauftragen da ich möglichst alles nötige selbst machen möchte.

Das Problem ist dass der Fehler erst seit gestern aufgetaucht ist. Vorher konnte ich ganz normal ein freigestelltes Logo als png Date hochladen und es wurde auch so angezeigt.

Die Datei ist eine png Datei und wird auch als solche anerkannt.

Da ich am Shop nicht verstellt und geändert habe frage ich mich woran das liegt das jetzt der Hintergrund angezeigt wird.

Hier die Domain:https://funfordeals.de/

Gabe · ‎12-02-2021

@paradiesvogel

Yup kann ich sehen, dass das nicht besonders gut aussieht.

Da der HG komplett weiss ist (#FFFFFF) kannst du in der Zwischenzeit bis das gelöst wird eine nicht-transparente Version des Logos in deinem header Abschnitt im Theme Editor hochladen und das wird zumindest auf der HP besser aussehen.

Eins habe ich hier drangehängt.

Dann kannst den ersten oder den zweiten folgenden Code im Asset->/theme.css ganz unten hinzufügen (wie gesagt, ohne Gewähr) und das kannst du zuerst in einer Kopie des Themes versuchen:

.site-header__logo-image {
    animation: none;
    background: none;
}

.site-header__logo-image {
animation: none !important;
    background: transparent !important;
}

Wenn das klappt kannst du deine URL oben natürlich wieder löschen.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

paradiesvogel · ‎12-02-2021

Danke dir aber das war nicht nötig aber gzut zu wissen wo ich es bei Bedarf ändern kann.

Ich habe das anders lösen können. Ich weis zwar nicht ob es fachmännisch ist aber es hat geklappt bus darauf dass obwohl dass Logo nur 300px gross ist der Header riesig und zu groß erscheint.

Meine Lösung:
Ich hatte eine Slideschow für verschiedene Produkte angelegt aber ausgeblendet. Nachdem ich diese gelöscht habe ist dre graue Hintergrund weg.

Gabe · ‎12-02-2021

Verstehe und da du ein 1-product Shop hast ist der jetzige Layout gar nicht schlecht da man sofort das Produkt sieht und in den Warenkorb legen kann ohne jegliche Gimmicks.

Es kann sein, dass im Zuge des Online Store 2.0 Änderungen zum Header Mechanismus gemacht wurden und das dies ein bekanntes Problem ist mit den Shopify Themes.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Betreff: Keine Transparenz trotz PNG

Keine Transparenz trotz PNG

Community Blog Artikel