background

  • Enlace amigable (slug) de la revisión: CSS/background
  • Título de la revisión: background
  • Id de la revisión: 513629
  • Creada:
  • Creador: sebasmagri
  • ¿Es la revisión actual?
  • Comentario Las propiedades CSS no deberían ser traducidas.

Contenido de la revisión

{{ AnteriorSiguiente("Guía de referencia de CSS", "CSS:background-attachment") }}

 

Resumen

La propiedad background corta camino para definir los valores individuales del fondo en una única regla CSS. Se puede usar background 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") }}.

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

Sintaxis

background: [  <background-color>    ||  <background-image>       ||
               <background-repeat>   ||  <background-attachment>  ||
               <background-position>
            ]   |   {{ Cssxref("inherit") }} ;

Valores

background-color
ver color.
background-image 
ver image.
background-repeat 
ver repeat.
background-attachment 
ver background-attachment.
background-position 
ver position.

Ejemplos

{{ CSSRefExampleLink("background") }}

body { 
    background: red;
}

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

Notas

Tomando una declaración válida, la propiedad background 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.

Especificaciones

Compatibilidad de navegadores

Navegador Mínima versión
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

Ver también

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

 

Categorías

Interwiki languages

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

Fuente de la revisión

<p>{{ AnteriorSiguiente("Guía de referencia de CSS", "CSS:background-attachment") }}</p>
<p>&nbsp;</p>
<h3 id="Resumen" name="Resumen">Resumen</h3>
<p>La propiedad <code>background</code> corta camino 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>
<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
<pre class="eval">
background: [  <em>&lt;background-color&gt;</em>    ||  <em>&lt;background-image&gt;</em>       ||
               <em>&lt;background-repeat&gt;</em>   ||  <em>&lt;background-attachment&gt;</em>  ||
               <em>&lt;background-position&gt;</em>
            ]   |   {{ Cssxref("inherit") }}&nbsp;;
</pre>
<h3 id="Valores" name="Valores">Valores</h3>
<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&nbsp;</dt>
 <dd>
  ver <code><a href="/es/CSS/background-image" title="es/CSS/background-image">image</a></code>.</dd>
 <dt>
  background-repeat&nbsp;</dt>
 <dd>
  ver <code><a href="/es/CSS/background-repeat" title="es/CSS/background-repeat">repeat</a></code>.</dd>
 <dt>
  background-attachment&nbsp;</dt>
 <dd>
  ver <code><a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a></code>.</dd>
 <dt>
  background-position&nbsp;</dt>
 <dd>
  ver <code><a href="/es/CSS/background-position" title="es/CSS/background-position">position</a></code>.</dd>
</dl>
<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
<p>{{ CSSRefExampleLink("background") }}</p>
<pre>
body { 
    background: red;
}

.topbanner {
    background: url("topbanner.png") #00D repeat fixed;
}
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<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>
<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
<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>
<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>
<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>
<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
<p>&nbsp;</p>
<div class="noinclude">
 <p><span class="comment">Categorías</span></p>
 <p><span class="comment">Interwiki languages</span></p>
</div>
<p>{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}</p>
Revertir a esta revisión