Allunga e ridimensiona un'immagine CSS in background - solo con CSS

853

Voglio che la mia immagine di sfondo si estenda e si ridimensioni in base alle dimensioni della finestra del browser.

Ho visto alcune domande su Stack Overflow che fanno il lavoro, come ad esempio Allunga e ridimensiona lo sfondo CSS . Funziona bene, ma voglio posizionare l'immagine usando background, non con un imgtag.

In quello imgviene inserito un tag, e quindi con CSS rendiamo omaggio al imgtag.

width:100%; height:100%;

Funziona, ma questa domanda è un po 'vecchia e afferma che in CSS 3 il ridimensionamento di un'immagine di sfondo funzionerà abbastanza bene. Ho provato questo esempio il primo , ma non ha funzionato per me.

C'è un buon metodo per farlo con la background-imagedichiarazione?

css  background 
— Fábio Antunes
fonte
113
dimensione dello sfondo: 100% 100%;
— Andreas L.,
5
Forse questa demo può essere utile: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas L'età della domanda non dovrebbe essere un fattore? Questo è stato posto 6 anni fa e la domanda che hai sottolineato è stata posta 4 anni fa.
— Fábio Antunes,
@ FábioAntunes IMHO non vorremmo chiudere la domanda con le migliori risposte e incoraggiare invece i duplicati a collegarla. Sono sicuro che questo sarebbe stato discusso su Meta ma non riesco a trovarlo ora ...
— Alex Angas

Risposte:

1047

CSS3 ha un piccolo attributo chiamato background-size:cover.

Questo ridimensiona l'immagine in modo che l'area di sfondo sia completamente coperta dall'immagine di sfondo mantenendo le proporzioni. L'intera area sarà coperta. Tuttavia, parte dell'immagine potrebbe non essere visibile se la larghezza / altezza dell'immagine ridimensionata è troppo grande.

— Vashishtha Jogi
fonte
11
La copertina ritaglia l'immagine se le proporzioni non corrispondono, quindi non è una buona soluzione generale.
— mahemoff,
1
nel caso in cui desideri che funzioni nei browser IE - github.com/louisremi/background-size-polyfill
— Wreeecks,
4
Non sembra funzionare su Firefox. Tuttavia, background-size: 100vw 100vh;fa bene il trucco.
— Yannick Mauray,
5
@YannickMauray prova: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare,
2
Se si desidera che questo, ma solo per l'asse orizzontale, utilizzare questo: background-size: 100% auto; stackoverflow.com/questions/41025630/...
— antoineMoPa
470

È possibile utilizzare la proprietà CSS3 per farlo abbastanza bene. Ridimensiona in base al rapporto, quindi nessuna distorsione dell'immagine (anche se ingrandisce le immagini piccole). Basta notare che non è ancora implementato in tutti i browser.

background-size: 100%;
— Matt Burgess
fonte
19
@nXqd Questo è praticamente il codice completo! Crea un contenitore con a background-imagee includi la proprietà sopra. Come accennato, il supporto del browser non è ancora buono e ci sono versioni specifiche del browser, ad esempio. -webkit-background-sizeecc. Vedi modulo CSS3 W3C: background-size e css3.info: background-size
— MrWhite,
15
Per preservare le proporzioni dell'immagine dovresti usare "background-size: cover;" o "background-size: contengono;". Ho creato un polyfill che implementa questi valori in IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi il
4
Si consiglia inoltre di aggiungere autoper preservare le proporzioni.
— Chibueze Opata,
186

Utilizzando il codice che ho citato ...

HTML

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

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

Questo produce l'effetto desiderato: scorrerà solo il contenuto, non lo sfondo.

L'immagine di sfondo viene ridimensionata alla vista del browser per qualsiasi dimensione dello schermo. Quando il contenuto non si adatta alla finestra del browser e l'utente deve scorrere la pagina, l'immagine di sfondo rimane fissa nella finestra mentre il contenuto scorre.

Con CSS 3 sembra che sarebbe molto più semplice.

— Fábio Antunes
fonte
12
Ma questa non è un'immagine di sfondo. Puoi farlo solo su un blocco, ma non su un elemento inline come un input [tipo = testo]. O mi sbaglio?
— Deerchao,
11
non c'è bisogno di class = "stretch", basta usare #background img {} come identificatore nel css
— BerggreenDK
indice z: -1; mantiene l'immagine in background. Se desideri mostrare la tua immagine in primo piano, puoi aumentare il valore dell'indice z o rimuovere tale indice.
— gokhanakkurt,
Il problema che sto riscontrando è con IE8. L'immagine di sfondo di un DIV si estende al massimo ma in IE8 le immagini vanno al di fuori del DIV quindi non sono in grado di vedere l'immagine completa. Viene ritagliato. Ecco la mia domanda: stackoverflow.com/questions/22331179/...
— Si8
1
L'ovvio errore che le persone fanno è di mettere l'immagine di sfondo nel css (cioè di background : url("example.png");) e quindi usare l'attributo css background-size:100%;sotto di esso per sperare di ridimensionare l'immagine alla larghezza dello schermo. Questo non funzionerà, vero? Se si desidera mettere un'immagine di sfondo per il corpo, è necessario aggiungere un attributo immagine al tag del corpo come <body background="example.png">. Quindi utilizzare CSS background-size:100%;per ridimensionarlo.
— sjsam,
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
fonte
Tuttavia, questo non funziona in IE8. Crea un margine nella parte superiore e inferiore della finestra.
— Erdomester,
Su Android ha funzionato per quando si utilizza html, body {...}invece di body {...}.
— Edward
53 
background-size: 100% 100%;

allunga lo sfondo per riempire l'intero elemento su entrambi gli assi.

— yeahdixon
fonte
40

La seguente parte CSS dovrebbe allungare l'immagine con tutti i browser.

Lo faccio in modo dinamico per ogni pagina. Pertanto utilizzo PHP per generare il proprio tag HTML per ogni pagina. Tutte le immagini si trovano nella cartella "immagine" e terminano con "Bg.jpg".

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Se hai una sola immagine di sfondo per tutte le pagine, puoi rimuovere la $picvariabile, rimuovere le barre rovesciate, regolare i percorsi e inserire questo codice nel tuo file CSS.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Questo è stato testato con Internet Explorer 9, Chrome 21 e Firefox 14.

— Thorsten Niehues
fonte
2
Il tuo esempio non funziona nel senso di compatibilità con le versioni precedenti, perché hai semplicemente dimenticato il principale "-" dei prefissi dei fornitori. Deve essere -webkit-background-size, -moz-background-sizee così via. Vedi developer.mozilla.org/en-US/docs/CSS/… Oppure vai per includerlo a prova di futuro in proprietà stenografiche comebackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Questa era l'unica soluzione che avrebbe funzionato per me su IE9. Grazie.
— robnick,
17

Puoi effettivamente ottenere lo stesso effetto di un'immagine di sfondo con il tag img. Devi solo impostare il suo indice z inferiore a tutto il resto, impostare la posizione: assoluto e utilizzare uno sfondo trasparente per ogni riquadro in primo piano.

— Kim Stebel
fonte
Questo è quello che ho visto in altre domande SO, e funziona, ma da quando CSS3 è uscito, ho pensato che ora era un modo migliore per farlo.
— Fábio Antunes,
3
Potrebbero esserci e tenendo conto degli sviluppi nell'uso del browser, potresti essere in grado di usarli commercialmente solo in ... 10 anni?
— Kim Stebel,
Essendo CSS3, non c'è nulla di sbagliato nell'usare una proprietà che i browser più moderni vedono e che fornisce uno standard minimo ai browser non supportati. Qui, ad esempio, potresti essere in grado di utilizzare uno sfondo piastrellato noioso ma accettabile per <IE8 e una bella immagine per Firefox / Chrome / Safari / Opera. Inoltre, ci sono molti polyfill per replicare la funzionalità CSS3 nei browser meno recenti con JavaScript. In altre parole, non è necessario attendere che ogni browser supporti CSS3 per poterlo utilizzare.
— Dan soffia
Appena trovato questo altro post che fa riferimento all'utilizzo del proprietario MS AlphaImageLoader: stackoverflow.com/questions/2991623/...
— uglymunky
17

Usa questo CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
fonte
15

È spiegato da trucchi CSS: immagine di sfondo perfetta a pagina intera

demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Codice:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
fonte
sulla base della risposta sopra, ho visto che la correzione degli allegati in background non funziona su dispositivi mobili e Microsoft Edge. La soluzione perfetta per allungare e correggere lo sfondo su tutti i dispositivi e i browser che consiglio jquery-backstretch.com
— Aamer Shahzad
15

Puoi aggiungere questa classe nel tuo file CSS.

.stretch {
    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 o successivo
  • Chrome Qualunque cosa o più tardi
  • Internet Explorer 9 o versioni successive
  • Opera 10 o versioni successive (Opera 9.5 supportato background-size, ma non le parole chiave)
  • Firefox 3.6 o successivo (Firefox 4 supporta la versione con prefisso non vendor)
— Arunraj S
fonte
Questa è una risposta "adatta per adattarsi" funzionante. Nota: le proporzioni cambieranno.
— devdrc,
10

Per ridimensionare le immagini in modo appropriato in base alle dimensioni del contenitore, utilizzare quanto segue:

background-size: contain;
background-repeat: no-repeat;
— justinpees
fonte
9

Lo uso e funziona con tutti i browser:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi jokar
fonte
9

Grazie!

Ma allora non stava lavorando per i Google Chrome e Safari browser (che si estende ha funzionato, ma l'altezza delle immagini era soli 2 mm!) , Fino a quando qualcuno mi ha detto ciò che manca:

Prova a impostare height:auto;min-height:100%;

Quindi cambialo per la tua height:100%;linea, dà:

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

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

Appena prima di quel codice appena aggiunto, ho questo nei miei temi Drupal Tendustyle.css :

html, body {altezza: 100%;}

#page {background: #ffffff; altezza: auto! importante; altezza: 100%; altezza minima: 100%; posizione: relativa;}

Quindi devo creare un nuovo blocco all'interno di Drupal con l'immagine mentre aggiungo class=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

Copiare un'immagine con l'editor in quel blocco Drupal non funziona; bisogna modificare l'editor in testo non formattato.

— Cybr
fonte
8

Concordo con l'immagine in div assoluto con larghezza e altezza del 100%. Assicurati di impostare la larghezza e l'altezza del 100% per il corpo nel CSS e di impostare i margini e il riempimento a zero. Un altro problema che troverai con questo metodo è che quando si seleziona il testo, l'area di selezione a volte può comprendere l'immagine di sfondo, il che ha lo sfortunato effetto di rendere lo stato selezionato all'intera pagina. Puoi aggirare il problema usando la user-select:noneregola CSS, in questo modo:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Ancora una volta, Internet Explorer è il cattivo qui, perché non riconosce l'opzione di selezione dell'utente - nemmeno l' anteprima di Internet Explorer 10 la supporta, quindi hai la possibilità di utilizzare JavaScript per impedire la selezione di immagini di sfondo (ad esempio, http : //www.felgall.com/jstip35.htm ) o usando il metodo CSS -background-stretch.

Inoltre, per SEO metterei l'immagine di sfondo nella parte inferiore della pagina, ma se l'immagine di sfondo impiega troppo tempo a caricarsi (cioè, con uno sfondo bianco inizialmente), potresti spostarti nella parte superiore della pagina.

— Myke Black
fonte
quindi non usare img solo un div con bg che non dovrebbe essere selezionato
— Jacek Pietal,
7

Volevo centrare e ridimensionare un'immagine di sfondo, senza estenderla all'intera pagina e volevo mantenere le proporzioni. Questo ha funzionato per me, grazie alle variazioni suggerite in altre risposte:

IMMAGINE IN LINEA: ------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
fonte
5

Ho usato una combinazione delle proprietà CSS di sfondo-X per ottenere l'immagine di sfondo con ridimensionamento ideale.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

In questo modo lo sfondo copre sempre l'intera finestra del browser e rimane centrato durante il ridimensionamento.

— Ryan Den-Kaat
fonte
4

Utilizzare il plug-in Backstretch . Si potrebbe anche avere più immagini diapositiva. Funziona anche all'interno di contenitori. In questo modo, ad esempio, si potrebbe coprire solo una parte dello sfondo con un'immagine di sfondo.

Dal momento che anche io riuscivo a farlo funzionare dimostra che è un plugin facile da usare :).

— Daniel
fonte
3

Se si desidera centrare il contenuto in orizzontale, utilizzare una combinazione come questa:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Questo sarà bellissimo.

— Samuel Ramzan
fonte
1

È possibile utilizzare la border-image : yourimageproprietà per ridimensionare l'immagine fino al bordo. Anche se dai l'immagine di sfondo, l'immagine del bordo verrà disegnata su di essa.

La border-imageproprietà è molto utile se il tuo foglio di stile è implementato da qualche parte che non supporta CSS 3. Se stai usando Google Chrome o Firefox, allora consiglio la background-size:coverproprietà stessa.

— Natesh Bhat
fonte
0

Vuoi raggiungere questo obiettivo usando solo un'immagine? Perché in realtà puoi creare qualcosa di simile a uno sfondo allungato usando due immagini. Immagini PNG per esempio.

L'ho già fatto prima, e non è poi così difficile. Inoltre, penso che lo stretching danneggerebbe solo la qualità dello sfondo. E se aggiungi un'immagine enorme, rallenterebbe computer e browser lenti.

— MarioRicalde
fonte
Buon punto. Ma sto usando jpg per l'immagine di sfondo, shes è di circa 1500x1000 richiede solo poco più di 100kb. Ma come hai fatto?
— Fábio Antunes,
1
Che ne dici di centrare l'immagine in orizzontale e ammorbidire i bordi dell'immagine con un colore solido o un motivo? Ciò ti consentirebbe di avere un adattamento senza soluzione di continuità se l'utente ha più della risoluzione dell'immagine.
— MarioRicalde,
Ma voglio che l'immagine riempia lo sfondo. Quello che stai dicendo, è quello che faccio di solito.
— Fábio Antunes,
0

Quanto segue ha funzionato per me.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

che ha funzionato per coprire l'intero sfondo su diverse dimensioni

— tony2tones
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.