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