Comment inclure l'arrière-plan-de couverture de valeur dans l'abréviation de fond de propriété?

Je suis en train de mettre une image de fond d'écran pour l'étirer à la pleine mesure d'un <div>'s de largeur et de hauteur. Le <div> sera de taille variable, donc je suis en utilisant background-size: cover;

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

Je ne peux pas comprendre comment le placer dans cette notation abrégée et de le faire travailler. Si j'ai la liste de tous les biens de façon autonome, il fonctionne très bien, mais je m'attendais à un tout-en-un solution.

Cela fonctionne, mais n'est pas recommandée:

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

InformationsquelleAutor techtheatre | 2013-06-13

background-image css

54

Selon la W3 et MDN, il doit y avoir une barre oblique séparant le backgound-taille de l'background-position:

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

Cette propriété doit être spécifié après background-position, séparés
avec le caractère"/".

L'opéra a également quelques informations sur l'arrière-plan abrégée:

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

InformationsquelleAutor j08691
26

Bonne question c'est du W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference

Donc, si vous voulez inclure l'arrière-plan-la valeur de taille dans la syntaxe abrégée, vous devez:
- D'inclure explicitement l'arrière-plan-les valeurs de position, même si ce sont les
  de même que les valeurs par défaut
  Écrire arrière-plan-les valeurs de position avant et arrière-taille de valeurs.
  Mettez une barre oblique entre ces deux paires de valeurs.
Si vous voulez faire quelque chose comme ceci
```
background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left /cover no-repeat;
```
Voir tripoter ici

http://jsfiddle.net/8Up6V/

InformationsquelleAutor Dominic Green
16

Voici un exemple d'utilisation de la asker de paramètres de travail. Certains des autres réponses ont trop compliqué les paramètres un peu. Tout ce qu'il fait, c'est la background-size doit être séparée de la background-position par une barre oblique /:
```
 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;
```
InformationsquelleAutor Marc
5

La la syntaxe de (multiples) de fond d'abréviation est:
contexte: [ <bg-couche> , ]* <finale-bg-couche>

Où

<bg-couche> = <bg-image> || <position> [ /
<bg-taille> ]? || <répétez-style> || <attachement> ||
<boîte> || <boîte>

<finale-bg-couche> = <bg-image> || <position> [ /
<bg-taille> ]? || <répétez-style> || <attachement> ||
<boîte> || <boîte> || <'background-color'>

... Si l'un <boîte> la valeur est présent, alors il définit à la fois
à l'arrière-plan d'origine " et "background-clip" pour cette valeur. Si deux valeurs
sont présents, la première définit l'arrière-plan d'origine " et la seconde
‘background-clip".
- Une double barre ( | ) sépare deux ou plus de deux options: l'une ou plusieurs d'entre eux doivent se produire dans n'importe quel ordre.
- Un astérisque (*) indique que le type précédent, un mot ou un groupe se produit zéro ou plusieurs fois.
- Un point d'interrogation (?) indique que le type précédent, un mot ou un groupe est facultatif.
De sorte que le pour inclure background-size, vous doit spécifier le background-position avant et le lieu d'une / dans l'entre-deux.

En supposant que vous souhaitez recadrer l'image du centre au lieu d'en haut à gauche, on peut écrire:
```
background: url(...) center / cover;
```
Tous les quatre exemples ci-dessous utilisent la même image:

CSS:
```
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;
}
```
HTML:
```
<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>
```
InformationsquelleAutor Salman A

Vous devez vous connecter pour publier un commentaire.