Allunga e ridimensiona lo sfondo CSS

C'è un modo per ottenere uno sfondo in CSS da allungare o ridimensionare per riempire il suo contenitore?

Per i browser moderni, puoi farlo utilizzando background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover significa allungare l'immagine in verticale o in orizzontale in modo da non affiancare / ripetere mai.

Funzionerebbe con Safari 3 (o successivi), Chrome, Opera 10+, Firefox 3.6+ e Internet Explorer 9 (o successivi).

Affinché funzioni con le versioni inferiori di Internet Explorer, prova questi CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Usa la proprietà CSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Questo è disponibile per i browser moderni, dal 2012.

Il ridimensionamento di un'immagine con CSS non è del tutto possibile, ma un effetto simile può essere ottenuto nel modo seguente, tuttavia.

Usa questo markup:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

con il seguente CSS:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

e dovresti aver finito!

Per ridimensionare l'immagine in modo che sia "al vivo" e mantenere le proporzioni, è possibile farlo invece:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Funziona abbastanza bene! Se una dimensione viene ritagliata, tuttavia, verrà ritagliata su un solo lato dell'immagine, anziché essere uniformemente ritagliata su entrambi i lati (e centrata). L'ho provato su Firefox, Webkit e Internet Explorer 8.

Usa l' attributo size-background in CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr supporta il rilevamento del supporto di dimensioni di sfondo . Puoi usare una soluzione alternativa JavaScript scritta per funzionare, ma ne hai bisogno e caricarla in modo dinamico quando non c'è supporto. Ciò manterrà il codice mantenibile senza ricorrere a intrusioni CSS intrusive per alcuni browser.

Personalmente uso uno script per gestirlo usando jQuery, è un adattamento di imgsizer . Dato che la maggior parte dei progetti che uso ora utilizzano la larghezza% per layout fluidi su tutti i dispositivi, c'è un leggero adattamento a uno dei loop (tenendo conto delle dimensioni che non sono sempre al 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Potresti anche essere interessato a jQuery CSS3 Finaliz [s] e .

Prova l'articolo di dimensioni dello sfondo . Se usi tutti i seguenti, funzionerà nella maggior parte dei browser tranne Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Non al momento. Sarà disponibile in CSS 3 , ma ci vorrà del tempo prima che venga implementato nella maggior parte dei browser.

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Funziona in:

• Safari 3+
• Chrome Qualunque sia +
• IE 9+
• Opera 10+ (Opera 9.5 ha supportato la dimensione dello sfondo ma non le parole chiave)
• Firefox 3.6+ (Firefox 4 supporta la versione con prefisso non vendor)

Inoltre puoi provare questo per una soluzione ie

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Ringraziamo questo articolo di Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

In una parola: no. L'unico modo per allungare un'immagine è con il <img>tag. Devi essere creativo.

Questo era vero nel 2008, quando è stata scritta la risposta. Oggi supportano i browser moderni background-sizeche risolvono questo problema. Attenzione che IE8 non lo supporta.

Definisci "allunga e ridimensiona" ...

Se hai un formato bitmap, generalmente non è fantastico (graficamente parlando) allungarlo e tirarlo su. Puoi usare schemi ripetibili per dare l'illusione dello stesso effetto. Ad esempio, se hai un gradiente che diventa più chiaro verso la parte inferiore della pagina, allora useresti un grafico largo un singolo pixel e della stessa altezza del tuo contenitore (o preferibilmente più grande per tenere conto del ridimensionamento) e quindi affiancalo attraverso il pagina. Allo stesso modo, se il gradiente attraversasse la pagina, sarebbe alto un pixel e più largo del contenitore e ripetuto lungo la pagina.

Normalmente per dare l'illusione che si estenda per riempire il contenitore quando il contenitore cresce o si restringe, si ingrandisce l'immagine rispetto al contenitore. Qualsiasi sovrapposizione non verrebbe visualizzata al di fuori dei limiti del contenitore.

Se vuoi un effetto che si basa su qualcosa di simile a una scatola con bordi curvi, allora attaccheresti il ​​lato sinistro della scatola al lato sinistro del contenitore con una sovrapposizione sufficiente che (entro limiti ragionevoli) non importa quanto sia grande il contenitore, mai si esaurisce lo sfondo e quindi si sovrappone un'immagine del lato destro della scatola con bordi curvi e la si posiziona sulla destra del contenitore. Così quando il contenitore si restringe o cresce, l'effetto della scatola curva sembra ridursi o crescere con esso - in realtà non lo fa, ma dà l'illusione di ciò che sta accadendo.

Per quanto riguarda davvero la riduzione dell'immagine e la crescita con il contenitore, è necessario utilizzare alcuni trucchi di stratificazione per far apparire l'immagine come sfondo e alcuni javascript per ridimensionarla con il contenitore. Non esiste un modo attuale per farlo con CSS ...

Se stai usando la grafica vettoriale, sei fuori dal mio regno di competenza, temo.

Questo è quello che ne ho fatto. Nella classe di stiramento, ho semplicemente cambiato l'altezza in auto. In questo modo l'immagine di sfondo ha sempre le stesse dimensioni della larghezza dello schermo e l'altezza avrà sempre le dimensioni giuste.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Aggiungi una background-attachmentlinea:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Vorrei sottolineare che questo equivale a fare:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Un'altra ottima soluzione per questo è Backstretch di Srobbin che può essere applicato al corpo o a qualsiasi elemento della pagina - http://srobbin.com/jquery-plugins/backstretch/

Prova questo

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Un ulteriore suggerimento per il trucco di SolidSmile è il ridimensionamento (ridimensionamento proporzionato) impostando una larghezza e usando auto per l'altezza.

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Usa la border-image : yourimageproprietà per impostare l'immagine e ridimensionarla sull'intero bordo dello schermo o della finestra.