Wie bekomme ich ein Hintergrundbild/Bild, um den Container per CSS zu füllen?

Ich habe ein Maßstabsvektorbild und ich möchte, dass es einen Container füllt. Es gibt ein paar dieser Fragen zu SO, obwohl sie ein bisschen alt sind. Z.B. Stretch and scale CSS background Wie bekomme ich ein Hintergrundbild/Bild, um den Container per CSS zu füllen?

Wenn ich jedoch versucht habe, solche Lösungen zu implementieren, waren die Ergebnisse enttäuschend.

Zum Beispiel:

body { 

    margin: 0; 
    padding: 0; 
    text-align: center; 
    color: #000; 
    background-color: #000 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 100%; 

} 

... 

.twoColLiqLtHdr #container { 
    width: 80%; 
    margin: 0 auto; 
    border: 2px solid #000000; 
    text-align: left; 
    background-color: #003; 
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */ 

    background-repeat: no-repeat; 
    color: #000; 
    font-family: "Times", cursive; 


    background-attachment:fixed; 
    min-height:100%; 
    /*top: 0; 
    left: 0; */ 



}

ich verschiedene Anordnungen versucht haben, aber ich kann es nie ohne leere Bereiche machen strecken (Wiederholung ist ein Erfolg der Art, aber sieht schrecklich).

Jedoch, da ich mit einem Svg arbeite, nähere ich mich diesem vielleicht in der falschen Weise, sollte ich stattdessen einen Svg Xmlns-Tag in der HTML verwenden? (P. S. Ich bin mir dessen bewusst absolute Unfähigkeit des IE8 SVGs zu handhaben)

Quelle

2012-09-26 user137263

Haben Sie versucht,

background-size:cover;

prüfen einige examples.

Ich hatte Probleme mit Webkit, background-size:cover und SVG Hintergrundbilder. Ich löste es

Zugabe

-webkit-background-origin:border;

Quelle

2012-09-26 12:41:33 Giona

Danke. Abdeckung deckt den Container erfolgreich ab. Seltsamerweise wird das Bild jedoch zu stark vergrößert, sodass nur die obere Hälfte des Bildes sichtbar ist. o.O Da ich das Bild repariert habe, ist es nicht möglich, den Rest des Bildes zu sehen ... – user137263

Sie brauchen nicht mehr 'background-attachment: fixed; ', da es die gesamte Höhe abdeckt! – Giona

Es verwirrt mich ein bisschen - aber das Hintergrundbild scheint komplett zu verschwinden, wenn es nicht mehr repariert ist! : p – user137263

Sie wahrscheinlich preserveAspectRatio = „none“ als Attribut des äußeren <svg> Element in der SVG-Datei selbst hinzufügen müssen.

Wenn Sie nicht die Bilddatei ändern möchten, dann können Sie

background-image versuchen: url ('background_image.svg # svgView (preserveAspectRatio (none))');

Firefox 15 würde das und wahrscheinlich auch andere UAs unterstützen.

Quelle

2012-09-26 12:57:07

Schön, sehr nützlich. Wie kann ich es mit Inline-SVG-codiert auf Base64 verwenden, wenn es möglich ist? – Giona

Ich habe das Attribut zu meinem SVG hinzugefügt, bevor ich es in base64 umwandelte, und es funktionierte wie ein Zauber. Danke @RobertLongson! – shshaw

Vielen Dank. Sie und preserveAspectRatio = "none" haben meinen Tag gerettet. :) –

Wie bekomme ich ein Hintergrundbild/Bild, um den Container per CSS zu füllen?

Antwort

Verwandte Themen