SVG-Grafik Hintergrundbild skalieren

[MrMurphy1]

Hallo,

ich möchte eine SVG-Datei als Hintergrundbild für eine Überschrift benutzen. Dabei soll das Hintergrundbild sich nicht wiederholen und die gesamte Größe des Überschrift-Elements ausfüllen.

Das funktioniert auch im FF und IE11. Nicht hingegen in Chrome und Opera. Dort wird die Grafik in ihrem Ursprungsverhältnis links angezeigt und die gelbe Hintergrundfarbe ist zu sehen.

Safari kann ich mangels Rechner nicht testen.

Die Überschrift soll in ihrem Container zentriert nach unten versetzt stehen, deshalb die padding-Werte.

Gibt es eine Möglichkeit (und wenn ja: welche) damit die SVG-Hintergrundgrafik in allen Browsern das gesamte Elment ausfüllt und von der gelben Hintergrundfarbe nichts zu sehen ist?

Link zur Seite unter "Problematische Seite". Hier noch der direkte Link zur Grafik:

bgg.svg

Auch wenn es reine CSS-Lösungen gibt interessiert es mich wie eine SVG-Datei wie von mir gewünscht als Hintergrundbild eingebunden werden kann. Eine reine CSS-Lösung als Zusatzinfo stört mich aber auch nicht.

Gruss

MrMurphy