Propiedad de imagen de fondo CSS || ebooksonline.es

el es imagen de fondo La propiedad se utiliza 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, necesitamos especificar las URL separadas con comas 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 más de una URL de imagen, separe las URL con una coma.
ningún: Este es el caso predeterminado en el que no se puede mostrar ninguna imagen.
comienzo: Se utiliza para establecer la propiedad en su valor predeterminado.
herencia: Hereda la propiedad de su madre.

el es imagen de fondo La propiedad también se puede utilizar con los siguientes valores:

gradiente lineal(): se utiliza para la imagen de fondo de degradado lineal definida por al menos 2 colores de arriba a abajo.
gradiente radial(): Se utiliza para establecer una imagen de fondo de degradado radial definida por al menos 2 colores desde el centro hasta el borde.

Usaremos 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 muestra la propiedad de imagen de fondo estableciendo el valor de url en 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:

ningún: Esta propiedad se usa para establecer cualquier imagen de fondo y no se mostrará nada y esta es una propiedad predeterminada.

Sintaxis:

background-image: url('url') none

Ejemplo 2: Este ejemplo muestra la propiedad de imagen de fondo al establecer el valor de URL en cualquier valor.

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:

comienzo: Establece la propiedad en su valor predeterminado.

Sintaxis:

background-image: url('url') initial;

Ejemplo 3: Este ejemplo muestra la propiedad de imagen de fondo estableciendo el valor de URL como el valor 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: El navegador es compatible con Propiedad de imagen de fondo están enlistados debajo:

Google Chrome 1.0
Microsoft Edge 12.0
Firefox 1.0
Internet Explorer 4.0
Ópera 3.5
Safari 1.0

Mis notas personales

HTML

HTML

HTML

Seguro que también te interesa

Deja un comentario Cancelar respuesta