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

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Propiedad background-image

La imagen de fondo puede establecerse mediante la propiedad CSS background-image. Se hace de la siguiente manera:

selector {
  background-image: url("imagen-dirección");
}

La dirección de la imagen debe estar dentro de url("..."). Por ejemplo, si la dirección de la imagen es cat.png, puede conectarla como fondo de la siguiente manera:

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

Puede configurar simultáneamente el color y la imagen de fondo. En este caso, la imagen se mostrará sobre el color de fondo. 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>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

    Añade imágenes de fondo a los bloques:

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

    © 2023-2025, codigoheroe.com