Revision 1044990 of background

<div>{{CSSRef}}</div>

<p>La propriété <strong><code>background</code></strong> est une propriété raccourcie qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément. Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p>

<p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntaxe</h2>

<pre class="brush: css">
/* On utilise une couleur &lt;background-color&gt; */
background: green;

/* Ici, une &lt;bg-image&gt; avec &lt;repeat-style&gt; */
background: url("test.jpg") repeat-y;

/* Là &lt;box&gt; et &lt;background-color&gt; */
background: border-box red;

/* Ici on utilise une seule image, centrée */
/* et remise à l'échelle */
background: no-repeat center/80% url("../img/image.png");
</pre>

<div class="note"><strong>Note :</strong> La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.</div>

<h3 id="Values">Valeurs</h3>

<p>Une ou plusieurs valeurs suivantes, dans n'importe quel ordre :</p>

<dl>
 <dt><code>&lt;attachment&gt;</code></dt>
 <dd>Voir {{cssxref("background-attachment")}}</dd>
 <dt><code>&lt;box&gt;</code></dt>
 <dd>Voir {{cssxref("background-clip")}}</dd>
 <dt><code>&lt;background-color&gt;</code></dt>
 <dd>Voir {{cssxref("background-color")}}</dd>
 <dt><code>&lt;bg-image&gt;</code></dt>
 <dd>Voir {{Cssxref("background-image")}}</dd>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Voir {{cssxref("background-position")}}</dd>
 <dt><code>&lt;repeat-style&gt;</code></dt>
 <dd>Voir {{cssxref("background-repeat")}}</dd>
 <dt><code>&lt;bg-size&gt;</code></dt>
 <dd>Voir {{cssxref("background-size")}}. Cette propriété doit être définie après <strong>&lt;position&gt;</strong>, séparée de cette dernière par une barre oblique '/'.</dd>
</dl>

<h3 id="Formal_syntax">Syntaxe formelle</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
&lt;p class="banniere"&gt;
  Dessine-moi une étoile&lt;br/&gt;
  Qui brille&lt;br/&gt;
  Dans le ciel.
&lt;/p&gt;
&lt;p class="attention"&gt;Voici un paragraphe !&lt;p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush:css' highlight:[2,6];">
.attention { 
  background: red; 
}

.banniere { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; 
}
</pre>

<h3 id="Result">Résultat</h3>

<p>{{EmbedLiveSample("Exemples")}}</p>

<h2 id="Specifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Pas de modification significative.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>1.0</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Gestion de plusieurs arrière-plans</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>1.0</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td>Gestion des images SVG comme arrière-plan</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>31.0</td>
   <td>9.0</td>
   <td>21.0</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Prise en charge de {{cssxref("background-size")}}</td>
   <td>{{CompatGeckoDesktop("18.0")}}</td>
   <td>21.0</td>
   <td>9.0</td>
   <td>21.0</td>
   <td>6.1</td>
  </tr>
  <tr>
   <td>Prise en charge de {{cssxref("background-origin")}} et {{cssxref("background-clip")}}</td>
   <td>{{CompatGeckoDesktop("22.0")}}</td>
   <td>31.0</td>
   <td>9.0</td>
   <td>21.0</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>2.1</td>
   <td>10.0</td>
   <td>5.0</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Gestion de plusieurs arrière-plans</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>2.1</td>
   <td>10.0</td>
   <td>5.0</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Gestion des images SVG comme arrière-plan</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>3.0</td>
   <td>10.0</td>
   <td>{{CompatUnknown}}</td>
   <td>4.2</td>
  </tr>
  <tr>
   <td>Prise en charge de {{cssxref("background-size")}}</td>
   <td>{{CompatGeckoMobile("18.0")}}</td>
   <td>3.0</td>
   <td>10.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Prise en charge de {{cssxref("background-origin")}} et {{cssxref("background-clip")}}</td>
   <td>{{CompatGeckoMOBILE("22.0")}}</td>
   <td>3.0</td>
   <td>10.0</td>
   <td>{{CompatNo}}</td>
   <td>4.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>{{EmbedCompatTable("web-css-background")}}</p>

<h2 id="See_also">Voir aussi</h2>

<ul>
 <li>{{cssxref("-moz-background-inline-policy")}}</li>
 <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Les gradients</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrière-plans</a></li>
</ul>