CSS fissato a tutto schermo anche quando lo zoom in/out

io sto cercando di realizzare qualcosa di simile con i CSS:CSS fissato a tutto schermo anche quando lo zoom in/out

Mi piacerebbe mantenere l'immagine di sfondo corpo fisso su schermo intero, questo è una sorta di fatto da seguente codice:

body 
{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
}

ora posso verificare la finestra è infatti riempito con quell'immagine, almeno questo funziona sul mio Firefox 3.6

Tuttavia, è rovinato quando ho provato per ingrandire/out (ctrl + -/+), l'immagine viene semplicemente allungata/ridotta man mano che la pagina si ingrandisce.

C'è un modo migliore di farlo solo con i CSS? Non ho trovato una buona proprietà per l'immagine di sfondo.

O dovrei iniziare a pensare a jQuery per manipolare la larghezza e l'altezza al volo? Entrambi sono stati impostati su 100% in modo mi sa che dovrebbe funzionare "come sempre" :(

Grazie per qualsiasi suggerimento in anticipo!

fonte

2010-08-29 Michael Mao

I due valori proprio alla fine, i due 100%, si riferisce al fondo ** ** posizione, non taglia. http://reference.sitepoint.com/css/background-position –

Triste dire che quei css non funzionano con IE 8 ... c'è qualche altro modo per farlo funzionare con IE8 e IE7? – vnpnlz

ho usato these techniques prima ed entrambi funzionano bene. Se leggete il pro/contro di ciascuna si può decidere che è giusto per il tuo sito.

in alternativa è possibile utilizzare la full size background image jQuery plugin se si vuole uscire dagli insetti in precedenza.

fonte

2010-08-29 11:42:00 Pat

Oops! mai pensato che ci sarebbe un plugin jQuery per la cosa esatta :) –

@Michael Ho scoperto che c'è un plugin jQuery per praticamente tutto;) – Pat

Ecco il semplice codice per la pagina intera immagine di sfondo quando lo zoom si applica solo il width:100% in stile/css Ecco fatto

position:absolute; width:100%;

fonte

2011-02-18 05:03:11 rajapandian

non sempre funziona come desiderato. –

c'è un'altra tecnica

uso

background-size:cover

Questo è set completo di CSS è

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

ultimi browser supporta la proprietà predefinita.

fonte

2012-09-05 10:12:33

bello, sei dio –

Si può fare parecchio con un semplice css ... la proprietà css background-size può essere impostata su un numero di cose e solo su cover come ha sottolineato Ranjith.

L'impostazione background-size: cover scalare l'immagine a coprire l'intero schermo ma può significare che alcuni di questa immagine è fuori schermo se il rapporto di aspetto dello schermo e immagine sono differenti.

Una buona alternativa è background-size: contain che ridimensiona l'immagine di sfondo per adattarla al più piccolo di larghezza e altezza, assicurando che l'intera immagine sia visibile ma che possa portare a letterbox se i rapporti di aspetto sono diversi.

Ad esempio:

body { 
     background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center; 
     background-size: contain; 
    }

Le altre opzioni che trovo meno utile sono: background-size: length <widthpx> <heightpx> che imposta la dimensione assoluta dell'immagine di sfondo. background-size: percentage <width> <height> l'immagine di sfondo è una percentuale della dimensione della finestra. (vedi w3schools.com's page)

fonte

2014-01-03 12:00:39 WorkingMatt

Aggiungi questo nel vostro file CSS:

.custom_class 
{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

e poi, nel vostro .html (o .php) File chiamare questa classe così:

<div class="custom_class"> 
    ... 
</div>

fonte

2014-12-19 14:49:55 dafNou

Utilizzare direttamente in questo modo

.bg-div{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
}

o chiama CSS separatamente come

.bg-div{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

fonte

2018-03-06 06:52:07

CSS fissato a tutto schermo anche quando lo zoom in/out

risposta

Problemi correlati