Come impostare la dimensione dello sfondo su "copertina", più un po 'più in CSS?

Ho un contenitore con un'altezza fissa di 850 px. Voglio un'immagine di sfondo che mantenga l'intero sfondo coperto a tutti i livelli di zoom. Vorrei usare background-size: cover tuttavia, ho bisogno che sia un po 'più grande di cover lo farà. Voglio che parte del background sia dissanguato dal contenitore e non visto, allo scopo di creare una parallasse.Come impostare la dimensione dello sfondo su "copertina", più un po 'più in CSS?

In pratica, come è possibile utilizzare background-size: cover e aumentare leggermente le dimensioni?

edit: dimenticato di dire che sto utilizzando anche background-attachment: fixed, quindi se non mi sbaglio, la sua realtà calcolata tramite la dimensione della finestra del browser e non il contenitore alto 850px (?). Come dovrei aggiungere quel sanguinamento in più in questo caso?

fonte

2014-06-14 Sam D20

Hai provato con 'padding-top'? – Vucko

Metterei un contenitore dentro la corrente e renderlo un po 'più "grande", quindi mettere lo sfondo su "copertina" con l'altro con "overflow: hidden" ... almeno è lì che inizierei . –

@Vucko come intendi? –

Semplicemente usando background-size: auto 110%; ha fatto il trucco.

fonte

2014-06-14 21:03:50

Tuttavia, questo non ha la funzionalità di 'cover'. Deve essere in grado di passare a 'background-size 100% auto' quando la larghezza dello sfondo diventa inferiore a quella del browser. –

Qualcuno sa che dovrei andare sull'implementazione del javascript per fare questo? –

Proprio quello che stavo cercando! –

Ho impostato il div del contenitore su: height: 100vh, overflow: hidden; poi poi quello interiore al 110% (o per quanto tempo vuoi nella tua parallasse), ora puoi cambiare la proprietà dello sfondo e la copertina funzionerà sempre

fonte

2016-04-21 14:17:01

Come impostare la dimensione dello sfondo su "copertina", più un po 'più in CSS?

risposta

Problemi correlati