files/es/web/css/background/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

---
title: background
slug: Web/CSS/background
tags:
  - CSS
  - 'CSS:Referencias'
  - Todas_las_Categorías
translation_of: Web/CSS/background
---
<p>{{CSSRef}}</p>

<p>La propiedad <code>background</code> es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar <code>background</code> para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.</p>

<ul>
 <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li>
 <li>Se aplica a: todos los elementos</li>
 <li>{{ Cssxref("inheritance", "Herencia") }}: no</li>
 <li>Porcentajes: permitido en {{ Cssxref("background-position", "posición") }}</li>
 <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li>
 <li>{{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales</li>
</ul>

<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>

<pre>/* Usando &lt;background-color&gt; */
background: green;

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

/* Usando &lt;box&gt; and &lt;background-color&gt; */
background: border-box red;

/* Una sola imagen, centrada y escalada */
background: no-repeat center/80% url("../img/image.png");</pre>

<p>La propiedad  <code>background</code> se especifica como una o más capas de fondo, separadas por comas.</p>

<p>La sintaxis de cada capa es la siguiente:</p>

<ul>
 <li>Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores
  <ul>
   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cattachment%3E">&lt;attachment&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-image%3E">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E">&lt;position&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Crepeat-style%3E">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E">&lt;bg-size&gt;</a></code> sólo puede ser incluido inmediatamente después de la <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E">&lt;position&gt;</a>, separado con el carácter '/', así: "<code>center/80%</code>".</li>
 <li>El valor <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbox%3E">&lt;box&gt;</a> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos {{cssxref("background-origin")}} y {{cssxref("background-clip")}}. Si se incluye dos veces, la primera ocurrencia establece {{cssxref("background-origin")}}, y el segundo conjunto {{cssxref("background-clip")}}.</li>
 <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbackground-color%3E">&lt;background-color&gt;</a></code> sólo puede ser incluido en la última capa especificada.</li>
</ul>

<h2 id="Valores" name="Valores">Valores</h2>

<dl>
 <dt>background-color</dt>
 <dd>ver <code><a href="/es/CSS/background-color" title="es/CSS/background-color">color</a></code>.</dd>
 <dt>background-image </dt>
 <dd>ver <code><a href="/es/CSS/background-image" title="es/CSS/background-image">image</a></code>.</dd>
 <dt>background-repeat </dt>
 <dd>ver <code><a href="/es/CSS/background-repeat" title="es/CSS/background-repeat">repeat</a></code>.</dd>
 <dt>background-attachment </dt>
 <dd>ver <code><a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a></code>.</dd>
 <dt>background-position </dt>
 <dd>ver <code><a href="/es/CSS/background-position" title="es/CSS/background-position">position</a></code>.</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

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

<pre class="brush: html">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

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

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

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

<h3 id="Result">Result</h3>

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

<h2 id="Notas" name="Notas">Notas</h2>

<p>Tomando una declaración válida, la propiedad <code>background</code> inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.</p>

<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li>
</ul>

<h2 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Mínima versión</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Firefox</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>

<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>