Tarea anterior
Fondos2/15
A la lista de tareas
  1. 1. La propiedad background-color
  2. 2. La propiedad background-image
  3. 3. La propiedad background-repeat
  4. 4. La propiedad background-position
  5. 5. Un poco más sobre background-position
  6. 6. La propiedad background-attachment
  7. 7. La propiedad background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato SVG
  12. 12. Formato GIF
  13. 13. Elementos anidados con fondos
  14. 14. Efectos con fondo repetido
  15. 15. Sprites
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La propiedad background-image

Una imagen de fondo se puede definir con la propiedad CSS background-image. Se hace así:

selector {
  background-image: url("ruta-de-la-imagen");
}

La ruta de la imagen siempre va dentro de url("..."). Por ejemplo, si la imagen está en cat.png, se puede usar como fondo así:

background-image: url("cat.png");

A un elemento se le puede asignar al mismo tiempo un color de fondo y una imagen de fondo. En ese caso, la imagen se mostrará sobre el color. Por ejemplo:

.block-with-color-and-image {
  background-image: url("cat.png");
  background-color: red;
}
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad background-image</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
CSS
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-color: #2ecc71; } .block2 { background-color: #3498db; } .block3 { background-color: #e74c3c; } .block4 { background-color: #e67e22; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Agreguen imágenes de fondo a los bloques:

    1. cat_box.png en el primer bloque,
    2. cat_fish.png en el segundo bloque,
    3. cat_drunk.png en el tercer bloque,
    4. cat_tied.png en el cuarto bloque.

    © 2023-2026, codigoheroe.com