Come includere il valore di copertina di sfondo nella proprietà di sfondo di stenografia?

Question

Sto provando a impostare un'immagine di sfondo per estendersi fino all'ampiezza della larghezza e dell'altezza di . Il <div> sarà di dimensioni variabili, in modo da sto usando background-size: cover;

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

Non riesco a capire come metterlo in questa notazione abbreviata 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'); 

Answer 1

Secondo la W3 e MDN, ci deve essere una barra che separa il backgound-dimensione dal background-position:

esempio W3C :

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

MDN:

Questa proprietà deve essere specificata dopo la posizione di fondo, separata con il carattere '/'.

Opera ha anche alcune informazioni sul fondo scorciatoia:

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

Answer 2

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

Quindi, se si desidera includere il valore di background-size nella stenografia sintassi, è necessario:

• Include esplicitamente background-pos valori validi anche se questi sono lo uguale ai valori di default Scrivi valori di posizione di fondo prima dei valori di dimensione dello sfondo. Metti una barra tra queste due coppie di valori.

Così si vuole fare qualcosa di simile

background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left/cover no-repeat; 

See violino qui

http://jsfiddle.net/8Up6V/

Answer 3

Il syntax of (multiple) background shorthand è:

sfondo: [< BG- strato >,] * < finale-bg-strato >

Dove

< bg-strato > = < bg-image > || <posizione> [/ < bg-size >]?|| <ripetizione> || <allegato> || <casella> || <casella>

< finale-bg-strato > = < bg-image > || <posizione> [/ < bg-size >]? || <ripetizione> || <allegato> || <casella> || <casella> || < 'background-color' >

... Se uno <scatola> valore è presente allora imposta sia ‘background-origin’ e ‘background-clip’ a quel valore. Se sono presenti due valori , i primi set 'origine origine' e il secondo 'sfondo-clip'.

• Una doppia barra (||) separa due o più opzioni: una o più di esse devono verificarsi, 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 è facoltativo.

Così il al fine di includere background-size, è necessario specificare il background-position prima e mettere un / in-between.

---

Supponendo che si desidera ritagliare l'immagine dal centro invece che in alto a sinistra si può scrivere:

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

Tutti i quattro esempi di seguito uso 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; 
 
}

<h1>background-position: left top<h1> 
 
<div class="test test-landscape test-lefttop"></div> 
 
<div class="test test-portrait test-lefttop"></div> 
 

 
<h1>background-position: center</h1> 
 
<div class="test test-landscape test-center"></div> 
 
<div class="test test-portrait test-center"></div>

Answer 4

Ecco un esempio utilizzando il parer del richiedente Ametri che funzioneranno. Alcune delle altre risposte hanno un po 'complicato i parametri. Tutto ciò che deve concluso è il background-size deve essere separato dal background-position da una barra /:

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