Revision 792739 of background

Raccourci de la révision : Web/CSS/background
Titre de la révision : background
ID de la révision : 792739
Créé : 25 avr. 2015 à 13:30:08
Créateur : FredB
Version actuelle ? Non
Commentaire Mise à jou

Étiquettes :

Contenu de la révision

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.

Syntaxe

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

Note : la propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan, puisqu'il n'existe qu'une seule couleur d'arrière-plan pour l'élément.

Valeurs

Une ou plusieurs des valeurs suivantes, sans importance d'ordre:

<attachement>: Voir {{Cssxref("background-clip")}}
<box>: Voir {{Cssxref("background-clip")}}
<background-color>: Voir {{ Cssxref("background-color") }}
<bg-image>: Voir {{ Cssxref("background-image") }}
<position>: Voir {{Cssxref("background-position")}}
<repeat-style>: Voir {{ Cssxref("background-repeat") }}.
<bg-size>: Voir {{Cssxref("background-size"). Cette propriété doit être spécifiée après <position>, séparée par le caractère « / ».

Syntaxe formelle

{{csssyntax("background")}}

où <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
et <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

Exemples

body { 
  background: red; 
}

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

Spécifications

Spécification	Statut	Commentaire
{{ SpecName('CSS3 Backgrounds', '#the-background', 'background') }}	{{ Spec2('CSS3 Backgrounds') }}	La propriété raccourcie a été étendue pour supporter les fonds multiples et les nouvelles propriétés {{ cssxref("background-size") }}, {{cssxref("background-origin")}} et {{ cssxref("background-clip") }}.
{{ SpecName('CSS2.1', 'colors.html#propdef-background', 'background') }}	{{ Spec2('CSS2.1') }}	Pas de changement significatif
{{ SpecName('CSS1', '#background', 'background') }}	{{ Spec2('CSS1') }}

Compatibilité des navigateurs

Fonction	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Support de base	{{ CompatGeckoDesktop("1.0") }}	1.0	4.0	3.5	1.0
Fonds multiples	{{ CompatGeckoDesktop("1.9.2") }}	1.0	9.0	10.5	1.3
Image SVG comme arrière-plan	{{ CompatGeckoDesktop("2.0") }}	{{ CompatVersionUnknown() }}	9.0 #	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}
Support de {{cssxref("background-size")}}	{{ CompatGeckoDesktop("18.0")}}	21.0	9.0	21.0	5.1
Support de {{cssxref("background-origin")}} et {{cssxref("background-clip")}}	{{ CompatGeckoDesktop("22.0")}}	31.0	9.0	21.0	5.1

Fonction	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Support de base	{{ CompatGeckoMobile("1.9.2") }}	2.1	{{ CompatUnknown() }}	10.0	3.2
Fonds multiples	{{ CompatGeckoMobile("1.9.2") }}	2.1	{{ CompatUnknown() }}	10.0	3.2
Image SVG comme arrière-plan	{{ CompatGeckoMobile("2.0") }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}	{{ CompatUnknown() }}
Support de {{cssxref("background-size")}}	{{ CompatGeckoMobile("18.0")}}	3.0	10.0	{{ CompatVersionUnknown }}	4.0
Support de {{cssxref("background-origin")}} et {{cssxref("background-clip")}}	{{ CompatGeckoMOBILE("22.0")}}	3.0	10.0	{{ CompatNo }}	4.0

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

Source de la révision

<p>{{ CSSRef() }}</p>

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>

<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <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&nbsp;:&nbsp; {{ 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.</p>

<p>{{cssbox("background")}}</p>

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

<pre class="brush: css">
/* Using a &lt;background-color&gt; */
background: green;

/* Using a &lt;bg-image&gt; and &lt;repeat-style&gt; */
background: url("test.jpg") repeat-y;

/* Using a &lt;box&gt; and &lt;background-color&gt; */
background: border-box red;
</pre>

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

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

<p>Une ou plusieurs des valeurs suivantes, sans importance d'ordre:</p>

<dl>
 <dt><code>&lt;attachement&gt;</code></dt>
 <dd>Voir {{Cssxref("background-clip")}}</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 spécifiée après &lt;position&gt;, séparée par le caractère «&nbsp;/&nbsp;».</dd>
</dl>

<h3>Syntaxe formelle</h3>

<pre class="syntaxbox">
<code>{{csssyntax("background")}}</code>

où <strong>&lt;bg-layer&gt;</strong> = &lt;bg-image&gt; || &lt;position&gt; [ / &lt;bg-size&gt; ]? || &lt;repeat-style&gt; || &lt;attachment&gt; || &lt;box&gt; || &lt;box&gt;
et <strong>&lt;final-bg-layer&gt;</strong> =&nbsp;&lt;bg-image&gt; || &lt;position&gt; [ / &lt;bg-size&gt; ]? || &lt;repeat-style&gt; || &lt;attachment&gt; || &lt;box&gt; || &lt;box&gt; || &lt;background-color&gt;</pre>

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

<p>{{ CSSLiveSample("background.html") }}</p>

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

.topbanner { 
  background: url("topbanner.png") #00D repeat-y fixed; 
}</pre>

<h2 id="Sp.C3.A9cifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</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 supporter les fonds multiples et les nouvelles 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 changement significatif</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#background', 'background') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonction</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support de base</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>Fonds multiples</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>Image SVG comme arrière-plan</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>9.0<a class="external" href="https://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_BG_Borders" title="https://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_BG_Borders"> #</a></td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Support de {{cssxref("background-size")}}</td>
   <td>{{ CompatGeckoDesktop("18.0")}}</td>
   <td>21.0</td>
   <td>9.0</td>
   <td>21.0</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Support 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>Fonction</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support de base</td>
   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
   <td>2.1</td>
   <td>{{ CompatUnknown() }}</td>
   <td>10.0</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Fonds multiples</td>
   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
   <td>2.1</td>
   <td>{{ CompatUnknown() }}</td>
   <td>10.0</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Image SVG comme arrière-plan</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Support 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>Support 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>

<h2 id="Voir_.C3.A9galement">Voir également</h2>

<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>

Revenir à cette révision