in

Propiedad de imagen de fondo CSS

Ejemplo

Establezca una imagen de fondo para el elemento :

cuerpo {
imagen de fondo: url («paper.gif»);
color de fondo: #cccccc;
}

Inténtalo tú mismo »

Ejemplo

Establezca dos imágenes de fondo para el elemento :

cuerpo {
imagen de fondo: url («img_tree.gif»), url («paper.gif»);
color de fondo: #cccccc;
}

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.


Definición y uso

los background-image La propiedad establece una o más imágenes de fondo para un elemento.

De forma predeterminada, una imagen de fondo se coloca en la esquina superior izquierda de un elemento y se repite tanto vertical como horizontalmente.

Propina: El fondo de un elemento es el tamaño total del elemento, incluido el relleno y el borde (pero no el margen).

Propina: Establezca siempre un color de fondo que se utilizará si la imagen no está disponible.

Valor por defecto: ninguno
Heredado: no
Animable: no. Leer acerca de animable
Versión: CSS1 + nuevos valores en CSS3
Sintaxis de JavaScript: objeto.style.backgroundImage = «url (img_tree.gif)» Pruébelo

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
imagen de fondo 1.0 4.0 1.0 1.0 3,5

Nota: IE8 y versiones anteriores no admiten varias imágenes de fondo.



Sintaxis CSS

imagen de fondo: url| ninguno | inicial | heredar;

Valores de propiedad

Valor Descripción
url (‘URL‘) La URL de la imagen. Para especificar más de una imagen, separe las URL con una coma
ninguno No se mostrará ninguna imagen de fondo. Esto es predeterminado
gradiente lineal() Establece un degradado lineal como imagen de fondo. Defina al menos dos colores (de arriba a abajo)
gradiente radial () Establece un degradado radial como imagen de fondo. Defina al menos dos colores (del centro a los bordes)
gradiente-lineal-repetido () Repite un degradado lineal
gradiente-radial-repetido () Repite un degradado radial
inicial Establece esta propiedad en su valor predeterminado. Leer acerca de inicial
heredar Hereda esta propiedad de su elemento padre. Leer acerca de heredar

Más ejemplos

Ejemplo

Establece dos imágenes de fondo para el elemento . Deje que la primera imagen aparezca solo una vez (sin repetición) y deje que la segunda imagen se repita:

cuerpo {
imagen de fondo: url («img_tree.gif»), url («paper.gif»);

repetición de fondo: no repetición, repetición;
color de fondo: #cccccc;
}

Inténtalo tú mismo »

Ejemplo

Utilice diferentes propiedades de fondo para crear una imagen de «héroe»:

.hero-image {
imagen de fondo: url («fotógrafo.jpg»); / * La imagen utilizada * /
color de fondo: #cccccc; / * Se usa si la imagen no está disponible * /
altura: 500px; / * Debe establecer una altura especificada * /

posición de fondo: centro; / * Centrar la imagen * /

repetición de fondo: no repetición; / * No repita la imagen * /

tamaño de fondo: cubierta; / * Cambiar el tamaño de la imagen de fondo para cubrir todo el contenedor * /
}

Inténtalo tú mismo »

Ejemplo

Establece un degradado lineal (dos colores) como imagen de fondo para un elemento

:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: degradado lineal (rojo, amarillo);
}

Inténtalo tú mismo »

Ejemplo

Establece un degradado lineal (tres colores) como imagen de fondo para un elemento

:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: degradado lineal (rojo, amarillo, verde);
}

Inténtalo tú mismo »

Ejemplo

La función repeating-linear-gradient () se utiliza para repetir gradientes lineales:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: gradiente lineal repetido (rojo, amarillo 10%, verde 20%);
}

Inténtalo tú mismo »

Ejemplo

Establece un degradado radial (dos colores) como imagen de fondo para un elemento

:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: gradiente radial (rojo, amarillo);
}

Inténtalo tú mismo »

Ejemplo

Establece un degradado radial (tres colores) como imagen de fondo para un elemento

:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: gradiente radial (rojo, amarillo, verde);
}

Inténtalo tú mismo »

Ejemplo

La función repeating-radial-gradient () se usa para repetir gradientes radiales:

# grad1 {
altura: 200px;
color de fondo: #cccccc;
imagen de fondo: gradiente radial repetido (rojo, amarillo 10%, verde 20%);
}

Inténtalo tú mismo »


páginas relacionadas

Tutorial de CSS: Fondo CSS, Fondos CSS (avanzado), Degradados CSS

Referencia HTML DOM: propiedad backgroundImage

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

social og oracle badge

¿Qué es Internet de las cosas (IoT)?

java constructor

Constructor de Java – Javatpoint