Jak uzyskać obraz tła/obraz do rozciągnięcia, aby wypełnić kontener za pomocą CSS?

Question

Mam obraz wektora skali i chcę go wypełnić kontener. Na SO jest kilka takich pytań, chociaż są one trochę stare. Na przykład. Stretch and scale CSS background

Jednak, gdy próbowałem wdrożyć takie rozwiązania, wyniki były rozczarowujące.

Na przykład:

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; */ 



} 

Próbowałem różnych rozwiązań, ale nie mogę uczynić go rozciągnąć bez wychodzenia puste obszary (powtarzając to swego rodzaju sukces, ale wygląda okropnie).

Jednak, ponieważ pracuję z svg, czy podchodzę do tego w niewłaściwy sposób, powinienem zamiast tego używać znacznika svg xmlns w html? (PS: Jestem świadomy absolutnej niemożności IE8 do obsługi pomostów żylnych)

Answer 1

Czy próbowałeś

background-size:cover; 

sprawdzić niektóre examples.

Miałem problemy z obrazami w tle, background-size:cover i SVG. Rozwiązałem to dodanie

-webkit-background-origin:border; 

Answer 2

prawdopodobnie trzeba dodać preserveaspectratio = „none” jako atrybut zewnętrznej <svg> elementu na obrazie SVG samego.

Jeśli nie chcesz zmodyfikować plik obrazu, a następnie można spróbować

background-image: url ('background_image.svg # svgView (preserveaspectratio (brak))');

Firefox 15 będzie obsługiwał to i prawdopodobnie również inne UA.