Propiedad de imagen de fondo CSS

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

Deja una respuesta

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