2012-09-26 7 views
6

Ho un'immagine vettoriale in scala e voglio riempire un contenitore. Ci sono un paio di queste domande su SO, anche se sono un po 'vecchie. Per esempio. Stretch and scale CSS backgroundCome ottenere l'immagine di sfondo/l'immagine da allungare per riempire il contenitore tramite CSS?

Tuttavia, quando ho tentato di implementare tali soluzioni i risultati sono stati deludenti.

Per esempio:

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



} 

Ho provato diversi regimi, ma non riesco a farlo allungare senza lasciare aree vuote (ripetendo è un successo di sorta, ma sembra orribile).

Tuttavia, dal momento che sto lavorando con un svg sto mi avvicino a questo in modo forse errato, dovrei usare un tag svg xmlns nell'html, invece? (P.S. Sono consapevole di assoluta incapacità di IE8 per gestire SVG)

risposta

15

Hai provato

background-size:cover; 

controllare alcune examples.

Ho riscontrato problemi con il webkit, background-size:cover e immagini di sfondo SVG. Ho risolto aggiungendo

-webkit-background-origin:border; 
+0

Grazie. copertura copre con successo il contenitore. Tuttavia, e stranamente, l'immagine è troppo "ingrandita", in modo tale che solo la metà superiore dell'immagine sia visibile. o.O Come ho fissato l'immagine non è possibile vedere il resto dell'immagine ... – user137263

+0

Non è necessario 'background-attachment: fixed;' più, poiché coprirà l'intera altezza! – Giona

+0

Mi sconcerta un po ', ma l'immagine di sfondo sembra scomparire del tutto quando non è più fissata! : p – user137263

10

probabilmente è necessario aggiungere preserveAspectRatio = "none" come un attributo della <svg> elemento esterno l'immagine SVG se stesso in.

Se non si desidera modificare il file di immagine allora si potrebbe provare

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

Firefox 15 supporta questo e probabilmente anche altri UA.

+0

Bello, molto utile. Come posso usarlo con SVG in linea codificato su base64, se è possibile? – Giona

+0

Ho aggiunto l'attributo al mio SVG prima di convertirlo in base64 e ha funzionato come un incantesimo. Grazie @RobertLongson! – shshaw

+0

Grazie mille. Tu e preserveAspectRatio = "none" mi hanno salvato la giornata. :) –

Problemi correlati