path: root/files/es/web/css/image/index.html

---
title: <image>
slug: Web/CSS/image
tags:
  - Gráfico
  - Imagen CSS
  - Tipo de Dato CSS
translation_of: Web/CSS/image
---
<div>{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p class="seoSummary">El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code>&lt;image&gt;</code> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.</p>

<p>CSS puede manejar diferentes tipos de imágenes:</p>

<ul>
 <li>imágenes con <em>dimensiones intrínsecas</em>, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.</li>
 <li>imágenes con <em>varias dimensiones intrínsecas</em>, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.</li>
 <li>imágenes sin dimensiones intrínsecas, pero con <em>una relación de aspecto intrínseca</em>, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.</li>
 <li id="no_intrinsic">imágenes <em><a>sin dimensiones intrínsecas</a>, ni relación de aspecto intrínseca</em>, como un degradado CSS, por ejemplo.</li>
</ul>

<p>CSS determina el <em>tamaño concreto del objeto</em> usando estas <em>dimensiones intrínsecas</em>, el <em>tamaño específico </em>en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el <em>tamaño predeterminado del objeto</em> definido por el tipo de propiedad con el que se usa la imagen:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Tipo de objeto</th>
   <th>Tamaño de objeto predeterminado</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{cssxref("background-image")}}</td>
   <td>El tamaño del área de posicionamiento de fondo de la imagen</td>
  </tr>
  <tr>
   <td>{{cssxref("list-style-image")}}</td>
   <td>El tamaño de un caracter de <code>1em</code></td>
  </tr>
  <tr>
   <td>{{cssxref("border-image")}}</td>
   <td>El tamaño del área de imagen de borde de un elemento</td>
  </tr>
  <tr>
   <td>{{cssxref("cursor")}}</td>
   <td>Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso</td>
  </tr>
  <tr>
   <td>Contenido reemplazado<br>
    como cuando se combina la propiedad CSS {{cssxref("content")}}<br>
    con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}</td>
   <td>Un rectángulo de <code>300px × 150px</code></td>
  </tr>
 </tbody>
</table>

<p>El tamaño concreto del objeto es calculado usando los siguientes algoritmos:</p>

<ul>
 <li>Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.</li>
 <li>Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.</li>
 <li>Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.</li>
</ul>

<p>Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.</p>

<div class="note"><strong>Nota:</strong> No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de <a href="#Compatibilidad_de_navegadores">compatibilidad de navegadores</a> para una lista detallada.</div>

<h2 id="Sintáxis">Sintáxis</h2>

<p>La representación de un tipo de dato CSS <code>&lt;image&gt;</code> puede ser una de las siguientes:</p>

<ul>
 <li>Una imagen denotada por un tipo de dato {{cssxref("&lt;uri&gt;")}} y la función <code>url()</code>;</li>
 <li>Un degradado CSS ({{cssxref("&lt;gradient&gt;")}});</li>
 <li>Una parte de la página, definida por la función {{cssxref("element", "element()")}}.</li>
</ul>

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

<p>Estos son valores válidos para imágenes:</p>

<pre class="brush:css example-good">url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
linear-gradient(to bottom, blue, red)  /* Un degradado (&lt;gradient&gt;) */
element(#colonne3)                     /* Una párte de la página, usando la función element(),
                                          mientras colonne3 sea un identificador CSS existente en la página. */
</pre>

<p>Estos son valores incorrectos para imágenes:</p>

<pre class="brush:css example-bad">cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */
</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#typedef-image', '&lt;image&gt;')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>
    <p>Antes de <a href="/es/docs/Web/CSS/CSS3">CSS3</a>, no había un tipo de dato <code>&lt;image&gt;</code> definido. Las imágenes solo podían ser definidas usando notaciones funcionales <code>url()</code>.</p>
   </td>
  </tr>
 </tbody>
</table>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td><code>&lt;uri&gt;</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>&lt;gradient&gt;</code></td>
   <td>{{CompatVersionUnknown}}<br>
    limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
   <td>IE 10{{property_prefix("-ms")}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-o")}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>element()</code></td>
   <td>4.0 (2.0) limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td><code>&lt;uri&gt;</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>&lt;gradient&gt;</code></td>
   <td>{{CompatVersionUnknown}}<br>
    limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>element()</code></td>
   <td>4.0 (2.0) limited to {{cssxref("background-image")}} &amp; {{cssxref("background")}}{{property_prefix("-moz")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a href="/es/docs/CSS/Using_CSS_gradients">Degradados CSS</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
 <li>{{cssxref("element", "element()")}}</li>
</ul>