
La propiedad background-image CSS establece una o más imágenes como fondo del elemento. Las imágenes de fondo se colocarán una encima de la otra, dibujando la primera capa seleccionada como está más cerca del usuario. El marco del elemento se dibujarán border
sobre las imágenes de fondo y el color especificado en la propiedad se colocará background-color
debajo.
La relación entre las imágenes mostradas y el cuadro y el marco del elemento se especifica mediante las propiedades background-clip
y background-origin
en CSS. Si la imagen especificada no se puede mostrar (por ejemplo: el navegador no pudo cargar la imagen desde su URL), el navegador asumirá que el valor es none
.
Nota: Incluso si no hay transparencia en las imágenes utilizadas, y el color de fondo normalmente no se mostrará, pero se recomienda que los desarrolladores web especifiquen el color de fondo usando la propiedad background-color
, si el navegador no puede cargar la imagen (por ejemplo) utilizará el color de fondo en lugar de la imagen.
Funciones background image en css
Valor inicial | none |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especifica, pero con un valor de enlace url absoluto. |
/* valor único */ background-image: url ( 'bg-image.png' ); /* valores múltiples */ background-image: url ( 'bg-image-1.png' ), url ( 'bg-image-2.png' ); /* palabra reservada */ background-image: none; /* valores globales */ background-image: inherit; background-image: initial; background-image: unset;
Ejemplos y aplicaciones
Fondo de página completa. Un ejemplo simple de configurar una imagen de fondo para un elemento <body> y especificar un color en caso de que el navegador no pueda mostrarlo por alguna razón:
body { background-image: url("bg-image.png"); background-color: #cccccc; }
Usar un degradado de color como fondo. Un ejemplo del uso de un degradado de color como imagen de fondo, y el degradado es lineal desde dorado ( gold
) hasta verde amarillento ( greenyellow
).
Código HTML:
< p class = "gradient-bg" > Contenido en texto </ p >
Código CSS:
.gradient-bg { background-image: linear-gradient(#205a23, #28832c); color: white; }
Usa más de una imagen como fondo de pantalla. Código CSS donde especificamos más de una imagen de fondo para el mismo elemento:
background-image: url(image-1.png), url(image-2.png);
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4.0 | 3,5 | 1.0 |
Imágenes SVG | 8.0 | 4.0 | 9.0 | 9.5 | 5,0 |
Estructura general
Cada fondo se puede especificar mediante una palabra reservada none
o mediante un tipo de datos <image>
.
<image>
El valor indica la <image>
imagen que se mostrará y se puede especificar más de una imagen separándolas con una coma (,).
Estructura formal
background-image: <bg-image>#;
dónde:
<bg-image> = none | <image>
Ver también
- Propiedades de la página incautados por la propiedad de acceso directo
background
: labackground-clip
,background-color
,background-origin
,background-position
,background-repeat
,background-size
ybackground-attachment
. - Página de propiedades
color
para establecer el color del elemento. - Tonal <Gradiente>.
- La página del artículo
<img>
que se utiliza para agregar imágenes.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS