La propiedad background-image se usa para establecer una o más imágenes de fondo para un elemento. Por defecto, coloca la imagen en la esquina superior izquierda. Para especificar dos o más imágenes, debemos especificar las URL separadas con una coma para ambas imágenes.
Sintaxis:
background-image: url('url')|none|initial|inherit;
Valores de propiedad:
- url(‘url’): Esto especifica la URL de la imagen. Para especificar la URL de más de una imagen, separe las URL con una coma.
- ninguno: este es el caso predeterminado en el que no se puede mostrar ninguna imagen.
- initial: Se utiliza para establecer la propiedad en su valor predeterminado.
- heredar: hereda la propiedad de su elemento padre.
La propiedad background-image también se puede utilizar con los siguientes valores:
- linear-gradient() : se utiliza para establecer la imagen de fondo de degradado lineal que se define al menos en 2 colores de arriba a abajo.
- radial-gradient(): se utiliza para establecer la imagen de fondo de degradado radial que se define al menos 2 colores desde el centro hasta el borde.
Utilizaremos los valores de propiedad anteriores y los entenderemos a través de los ejemplos.
url(‘url’): Cuando la imagen de fondo tiene una URL.
Sintaxis:
background-image: url('url')
Ejemplo 1: este ejemplo ilustra la propiedad de imagen de fondo al establecer el valor de url como url.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-image property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>background-image:url;</h3>
<div>
GeeksforGeeks: A computer science portal for geeks
</div>
</body>
</html>
Producción:
ninguno: esta propiedad se utiliza para no establecer una imagen de fondo y no se mostrará nada y esta es una propiedad predeterminada.
Sintaxis:
background-image: url('url') none
Ejemplo 2: este ejemplo ilustra la propiedad de imagen de fondo estableciendo el valor de URL como ninguno.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-image property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png") none;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>background-image:url none;</h3>
<div>
GeeksforGeeks: A computer science portal for geeks
</div>
</body>
</html>
Producción:
initial: Establece la propiedad a su valor por defecto.
Sintaxis:
background-image: url('url') initial;
Ejemplo 3: este ejemplo ilustra la propiedad de imagen de fondo estableciendo el valor de URL como inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS background-image property</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png") initial;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>CSS background-image:url initial;</h3>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de imagen de fondo se enumeran a continuación:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 1.0
- Internet Explorer 4.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA