Come includere il valore di copertina di sfondo nella proprietà dello sfondo abbreviato?

Sto provando a impostare un’immagine di sfondo per estendere la larghezza e l’altezza di

. Il

sarà di dimensioni variabili, quindi sto usando background-size: cover;

 background: url("../images/bkgnd-sidebar.png") no-repeat left top cover; 

Non riesco a capire come inserirlo in questa notazione stenografica e farlo funzionare. Se elenco ogni proprietà in modo indipendente, funziona bene, ma speravo in una soluzione all-in-one.

Questo funziona, ma non è preferito:

 background-size:cover; background-image:url('../images/bkgnd-sidebar.png'); 

Secondo W3 e MDN , deve esserci una barra che separa la dimensione del backgound dalla posizione di sfondo:

Esempio W3C:

 p { background: url("chess.png") 40% / 10em gray round fixed border-box; } 

MDN:

Questa proprietà deve essere specificata dopo la posizione di sfondo, separata dal carattere ‘/’.

Opera ha anche alcune informazioni sulla stenografia dello sfondo:

http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html

Buona domanda questo è da W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference

Pertanto, se si desidera includere il valore della dimensione dello sfondo nella syntax abbreviata, è necessario:

  • Includere esplicitamente i valori di posizione di sfondo anche se questi sono uguali ai valori di default Scrivi valori di posizione di sfondo prima dei valori di dimensione di sfondo. Metti una barra tra queste due coppie di valori.

Quindi vorresti fare qualcosa di simile

 background: url(http://sofit.miximages.com/css/test-anxiety.gif) top left / cover no-repeat; 

Vedi qui il violino

http://jsfiddle.net/8Up6V/

Ecco un esempio che utilizza i parametri del richiedente che funzioneranno. Alcune delle altre risposte hanno un po ‘complicato i parametri. Tutto ciò che serve è che la background-size deve essere separata dalla background-position di background-position da una barra in avanti / :

  background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat; 

La syntax della stenografia in background (multipla) è:

background: [,] *

Dove

= || [/ ]? || || || ||

= || [/ ]? || || || || || < 'Background-color'>

… Se è presente un valore , imposta sia “background-origin” che “background-clip” su quel valore. Se sono presenti due valori, il primo imposta “background-origin” e il secondo “background-clip”.

  • Una doppia barra (||) separa due o più opzioni: una o più di esse devono avvenire, in qualsiasi ordine.
  • Un asterisco (*) indica che il tipo, la parola o il gruppo precedenti si verifica zero o più volte.
  • Un punto interrogativo (?) Indica che il tipo, la parola o il gruppo precedenti sono facoltativi.

Pertanto, per includere la background-size , è necessario specificare la background-position dello background-position prima di esso e posizionare un / in-between.


Supponendo che si desideri ritagliare l’immagine dal centro anziché in alto a sinistra, si dovrebbe scrivere:

 background: url(...) center / cover; 

Tutti e quattro gli esempi seguenti utilizzano la stessa immagine:

 h1 { font: medium monospace; } .test { display: inline-block; } .test-landscape { width: 200px; height: 150px; } .test-portrait { width: 150px; height: 200px; } .test-lefttop { background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) left top / cover; } .test-center { background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) center / cover; } 
 

background-position: left top

background-position: center