background-size 100% funktioniert nicht

    Moin,


    ich helfe gerade einer Freundin bei der Seite für ihren Kindergarten. Und ich habe ein einfarbiges SVG erstellt, welches ich als Hintergrund für Fotos nutzen wollte. Jedes Foto sollte dann einen padding-Wert kriegen, damit die alle durch das dahinter liegende SVG einen schön unregelmäßigen Rahmen erhalten. Die Idee war, dass das SVG - ist ja eine Vektorgrafik - sich schön der Größe der Fotos anpassen kann, daher kriegte der Hintergrund von mir eine background-size von 100% 100%; Im Ergebnis passt er sich der Breite des Bildes aber nicht an. Können mir die Profis sagen, wieso?


    Es geht bei dem Link oben um das Foto im Text.


    Liebe Grüße

    yeastie99 :)

    Geht es um das Bild in der Mitte ? Denke mal ja.

    Habe das bei mir mal testweise so gemacht.

    Code
    section img {
    padding: 31px;
    margin: 0 0 20px 20px;
    background: url(../img/imgbg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
}

    und muß sagen das es ok aussieht.Fals du das so meinst.

    Das man ein <img> ein background-image geben kann wußte ich auch noch nicht.Zumindest habe ich es auch noch nie versucht oder gebraucht.

    Teste erstmal und dann sag mal ob das ergebniss stimmt

    Leider nicht. cover hatte ich auch schon probiert. aber ich brauch es ja ggf. verzerrt. bei cover passt die breite, aber die länge wird mit skaliert. so ist der rahmen unten eckig, weil das svg da einfach über den sichtbaren hintergrund hinaus geht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden