Una imagen de fondo se puede especificar para casi cualquier elemento HTML.
Imagen de fondo en un elemento
Para agregar una imagen de fondo a un elemento HTML, usa el atributo HTML style y agrega la propiedad CSS background-image:
Ejemplo:
Imagen de fondo en una página
Si quieres que toda la página tenga una imagen de fondo, debes especificar la imagen de fondo en el elemento <body>:
Ejemplo:
Fondo repetido
Si la imagen de fondo es más pequeña que el elemento, la imagen se repetirá, horizantal y verticalmente, hasta cubrir todo el elemento:👇
Para evitar que la imagen se repita, establezca la propiedad CSS background-repeat a no-repeat👇
Ejemplo:
/*Propiedades CSS*/
body {
background-image: url("img_girl.jpg");
background-repeat: no-repeat;
}
Fondo de portada
Si quieres que la imagen de fondo cubra todo el elemento, puedes establecer la propiedad CSS background-size a cover:😉
Además, para asegurarnos de que todo el elemento esté siempre cubierto, establezca la propiedad CSS background-attachment a fixed:👌
De esta forma, la imagen de fondo cubrirá todo el elemento, sin estirarse (la imagen mantendrá sus dimensiones originales):
Ejemplo:
body {
background-image: url("img_girl.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Fondo estirado
Si quieres que la imagen de fondo se estire para ajustarse a todo el elemento, puedes establecer la propiedad CSS background-size a 100% 100%:
Intente cambiar el tamaño de la ventana del navegador y verá que la imagen se estira, pero siempre cubre todo el elemento.👇
Ejemplo:
body {
background-image: url("img_girl.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
En los siguientes artículos (día 58), aprenderemos más sobre las propiedades CSS.
Resumen
Las imágenes de fondo se pueden establecer para casi todos los elementos HTML. Recomiendo usar un archivo externo CSS para establecer las propiedades para una imagen.
Traducido con 💚 desde W3Schools.com