background

  • Raccourci de la révision : CSS/background
  • Titre de la révision : CSS : la propriété background
  • ID de la révision : 50429
  • Créé :
  • Créateur : Yuichiro
  • Version actuelle ? Non
  • Commentaire 20 words added

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS background est un raccourci pour définir les valeurs des propriétés d'arrière-plan dans une seule et unique règle CSS. La propriété background peut être utilisée pour définir les valeurs d'une ou de plusieurs des propriétés suivantes :  {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ Cssxref("background-size") }} et {{ Cssxref("background-attachment") }}.

La propriété raccourcie background assignera les valeurs données explicitement et définira les autres propriétés à leurs valeurs par défaut.

  • {{ Xref_cssinitial() }}:  transparent || none || repeat || scroll || 0% 0%
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Pourcentages : permis pour {{ Cssxref("background-position") }}
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : voir les propriétés individuelles

Syntaxe

background: [<bg-layer>, ]* <final-bg-layer>

Où :

<bg-layer>
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  {{ Cssxref("inherit") }}
<final-bg-layer>
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  {{ Cssxref("inherit") }} || <background-color>

{{ gecko_minversion_note("1.9.2", "La gestion des fonds multiples a été ajoutée dans Gecko 1.9.2.") }}

Valeurs

<background-color>
Voir {{ Cssxref("background-color") }}.
<background-image>
Voir {{ Cssxref("background-image") }}
<background-repeat>
Voir {{ Cssxref("background-repeat") }}.
<background-attachment>
Voir {{ Cssxref("background-attachment") }}.
<background-position>
Voir {{ Cssxref("background-position") }}.

Exemples

{{ CSSRefExampleLink("background") }}

body { 
   background: red;
}

.topbanner {
    background: url("topbanner.png") #00D repeat fixed;
}

Notes

La propriété background commence par réinitialiser les propriétés d'arrière-plan individuelles à leur valeur initiale, puis leur assigne les valeurs explicitement définies dans la déclaration. Vous n'avez pas à définir une valeur pour chaque propriété individuelle, mais uniquement celles que vous désirez modifier par rapport à leur valeur initiale.

Compatibilité des navigateurs

Navigateur Version minimale Fonds multiples
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 ---
Safari (WebKit) 1.0 (85) 1.3 (312)

Spécifications

Voir également

  • {{ CSS_Reference:Background() }}
  • {{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}, {{ cssxref("-moz-background-inline-policy") }}
  • Utilisation de dégradés
  • Fonds multiples

{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "it": "it/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété CSS <code>background</code> est un raccourci pour définir les valeurs des propriétés d'arrière-plan dans une seule et unique règle CSS. La propriété <code>background</code> peut être utilisée pour définir les valeurs d'une ou de plusieurs des propriétés suivantes :  {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ Cssxref("background-size") }} et {{ Cssxref("background-attachment") }}.</p>
<p>La propriété raccourcie <code>background</code> assignera les valeurs données explicitement et définira les autres propriétés à leurs valeurs par défaut.<a href="/fr/CSS/Valeur_initiale" title="fr/CSS/Valeur_initiale"><br>
</a></p>
<ul> <li>{{ Xref_cssinitial() }}:<code>  transparent || none || repeat || scroll || 0% 0%</code></li> <li>S'applique à : tous les éléments</li> <li>{{ Xref_cssinherited() }} : non</li> <li>Pourcentages : permis pour {{ Cssxref("background-position") }}</li> <li>Média : {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }} : voir les propriétés individuelles</li>
</ul>
<h3 name="Syntaxe">Syntaxe</h3>
<pre class="eval">background: [&lt;bg-layer&gt;, ]* &lt;final-bg-layer&gt;</pre>
<p>Où :</p>
<dl> <dt>&lt;bg-layer&gt;</dt> <dd><code>[ &lt;background-color&gt; || &lt;background-image&gt; || &lt;background-repeat&gt; || &lt;background-attachment&gt; || &lt;background-position&gt; ]<br> |  {{ Cssxref("inherit") }}</code></dd> <dt>&lt;final-bg-layer&gt;</dt> <dd><code>[ &lt;background-color&gt; || &lt;background-image&gt; || &lt;background-repeat&gt; || &lt;background-attachment&gt; || &lt;background-position&gt; ]<br> |  {{ Cssxref("inherit") }} || &lt;background-color&gt;</code></dd>
</dl>
<p>{{ gecko_minversion_note("1.9.2", "La gestion des <a href="/fr/CSS/Fonds_multiples" title="fr/CSS/Fonds multiples">fonds multiples</a> a été ajoutée dans Gecko 1.9.2.") }}</p>
<h3 name="Valeurs">Valeurs</h3>
<dl> <dt>&lt;background-color&gt;</dt> <dd>Voir {{ Cssxref("background-color") }}.</dd> <dt>&lt;background-image&gt;</dt> <dd>Voir {{ Cssxref("background-image") }}</dd> <dt>&lt;background-repeat&gt;</dt> <dd>Voir {{ Cssxref("background-repeat") }}.</dd> <dt>&lt;background-attachment&gt;</dt> <dd>Voir {{ Cssxref("background-attachment") }}.</dd> <dt>&lt;background-position&gt;</dt> <dd>Voir {{ Cssxref("background-position") }}.</dd>
</dl>
<h3 name="Exemples">Exemples</h3>
<p>{{ CSSRefExampleLink("background") }}</p>
<pre class="eval">body { 
   background: red;
}

.topbanner {
    background: url("topbanner.png") #00D repeat fixed;
}
</pre>
<h3 name="Notes">Notes</h3>
<p>La propriété <code>background</code> commence par réinitialiser les propriétés d'arrière-plan individuelles à leur valeur initiale, puis leur assigne les valeurs explicitement définies dans la déclaration. Vous n'avez pas à définir une valeur pour chaque propriété individuelle, mais uniquement celles que vous désirez modifier par rapport à leur valeur initiale.</p>
<h3 name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<table class="standard-table"> <tbody> <tr> <th>Navigateur</th> <th>Version minimale</th> <th>Fonds multiples</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
</table>
<h3>Spécifications</h3>
<ul> <li><a class=" external" href="http://www.w3.org/TR/css3-background/" title="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Module Level 3</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1 Colors and backgrounds #background</a></li>
</ul>
<h3 name="Voir_.C3.A9galement">Voir également</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li>{{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}, {{ cssxref("-moz-background-inline-policy") }}</li> <li><a href="/fr/Utilisation_de_dégradés" title="fr/Utilisation de dégradés">Utilisation de dégradés</a></li> <li><a href="/fr/CSS/Fonds_multiples" title="fr/CSS/Fonds multiples">Fonds multiples</a></li>
</ul>
<p>{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "it": "it/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}</p>
Revenir à cette révision