Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-image

Resumen

La propiedad background-image define la imagen de fondo de un elemento.

Sintaxis

background-image: url | none | inherit

Valores

uri 
Localización de la imagen que se utilizará de fondo.
none 
Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.

Ejemplos

Note that the star image is partially transparent and is layered over the cat image.

HTML

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Result

Notas

Los desarrolladores deben asegurarse que han especificado un color de fondo (background-color) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.

Especificaciones

Compatibilidad de navegador

Navegador Versión mínima
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Ver también

background, background-attachment, background-color, background-image, background-position, background-repeat

Etiquetas y colaboradores del documento

 Colaboradores en esta página: andrpueb, SphinxKnight, teoli, Rayber, Nathymig, ethertank
 Última actualización por: andrpueb,