[Gelöst] CSS: *.svg-Datei skaliert als Logo in den Header einfügen - wie?

Liebe Leser,

ich möchte eine *.svg-Vektordatei als Logo in den Header einfügen.

Hierzu habe ich ein neues Frontend-Modul als "Eigenen HTML-Code" erstellt und dort folgenden Code reingepackt:

HTML-Code:

---

<!-- indexer::stop -->
<div id="Gestaltung_Logo"><a href="{{env::path}}">{{page::rootTitle}}</a></div>
<!-- indexer::continue -->

---

Das zugehörige CSS schaut so aus:

Code:

---

#header .inside #Gestaltung_Logo {        width:40%;
                                        height: 100%;
                                            margin-left: -10%;        }

#header .inside #Gestaltung_Logo a {        display:block;
                                          width:inherit;
                                        height:inherit;
                                        text-indent:-99999px;
                                        background:url(blablabla/logo.svg);
                                        background-repeat: no-repeat;
                                        background-size: inherit;        }

---

Leider wird die Grafik nicht auf das zugehörige Parent-div skaliert sondern wird vielmehr entweder zu groß (den Rand überdeckend) oder viel zu klein dargestellt. Wo liegt mein Fehler?

Besten Dank für Eure Hilfe! :)

Viele Grüße
KloBoBBerLe

Zum Glück haben wir so eine schöne Demo wo man abgucken kann.

http://demo.contao.org

Ich kann mir vorstellen dass background-size: contain; dein Problem löst.

@KloBoBBerLe: Link zur Seite?

Herzlichen Dank für Eure Antworten! :)

Zitat:

---

Zitat von ciaobello

Zum Glück haben wir so eine schöne Demo wo man abgucken kann.

http://demo.contao.org

---

Ja, mit einer fixen PNG-Datei wie im Academy-Beispiel ist das alles viel einfacher... Wie Du aber bestimmt gelesen hast möchte ich eine SVG-Datei mit all ihren Eigensinnigkeiten verwenden... ;)

Dennoch habe ich das Academy-Beispiel nun einmal ausprobiert:

HTML-Code:

---

<!-- indexer::stop -->
<a href="{{env::path}}" id="Header_Logo">
<img src="files/theme/graphics/header_logo.svg" alt="Logo Blabla">
</a>
<!-- indexer::continue -->

---

Das CSS:

Code:

---

        #header .inside #Header_Logo {                width:40%;
                                                    margin-left: -10%;        }

---

Leider noch immer Fehlanzeige... Mit dem PNG funktioniert alles problemlos, das SVG hingegen nimmt die komplette im Header verfügbare Breite ein.

Zitat:

---

Zitat von dazzle89

Ich kann mir vorstellen dass background-size: contain; dein Problem löst.

---

Leider nicht, das hatte ich auch schon probiert..

Zitat:

---

Zitat von Spooky

@KloBoBBerLe: Link zur Seite?

---

Läuft leider noch offline...

Hat noch jemand weitere Ideen? :D

Viele Grüße
KloBoBBerLe

Zitat:

---

Zitat von CSS

#header .inside #Header_Logo

---

Bin kein CSS Urgestein ... aber Dein CSS sieht holprig aus. Darum habe ich Dich auf die Demo verwiesen. Wenn es nicht funktioniert hast du wohl einen Fehler drin.

In der Demo ist der Header die ID und das Logo ist eine Klasse!

Vielen Dank für Deine Hilfe! :)

Zitat:

---

Zitat von ciaobello

In der Demo ist der Header die ID und das Logo ist eine Klasse!

---

Stimmt, da hast Du Recht! Ich hatte den Code oben nur beispielhaft geschrieben (in meiner Produktiv-Version war er korrekt).

Nun ja, in der Academy-Demo ist das Logo direkt im HTML per img-Tag eingebunden:

HTML-Code:

---

<a href="{{env::path}}" class="logo">
  <img src="files/contaodemo/theme/img/logo.png" alt="Contao Demo">
</a>

---

Ich möchte die Einbindung des Logos jedoch lieber per CSS lösen (Flexibilität). So schaut es nun aus und funktioniert korrekt:

HTML:

HTML-Code:

---

<!-- indexer::stop -->
<div class="Header_Logo"><a href="{{env::path}}">{{page::rootTitle}}</a></div>
<!-- indexer::continue -->

---

CSS:

Code:

---

*/

        .Header_Logo        {        width: 40%;
                                    height: 100%;
                                margin-left: -10%;                }

        .Header_Logo        {        display: block;
                                width: 100%;
                                height: 100%;
                                text-indent: -99999px;
                                background-image: url("blabla.svg");
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: contain;        }

---

:)

Viele Grüße
KloBoBBerLe

Zitat:

---

Stimmt, da hast Du Recht! Ich hatte den Code oben nur beispielhaft geschrieben (in meiner Produktiv-Version war er korrekt).

---

Naja, dann solltest Du aber besser gucken was Du hier postest. Ohne Link nur mit solchem Zeugs hier, veräppelst Du uns nur ...

Zitat:

---

Zitat von ciaobello

Ohne Link nur mit solchem Zeugs hier, veräppelst Du uns nur ...

---

Stimmt, das tut mir Leid! Mir ging es bei dem Code-Schnipsel lediglich um die erteilten CSS-Zuweisungen, weshalb ich bei den Selektoren leider etwas nachlässig war... Soll nicht wieder vorkommen! ;)

Viele Grüße
KloBoBBerLe