Imágenes de fondo HTML
Se puede especificar una imagen de fondo para casi cualquier elemento HTML.
Imagen de fondo en un elemento HTML
Para agregar una imagen de fondo en un elemento HTML, use el styleatributo HTML y la background-imagepropiedad CSS:
Ejemplo
Agregue una imagen de fondo en un elemento HTML:
<div style="background-image: url('img_girl.jpg');">
También puede especificar la imagen de fondo en el <style>
elemento, en la <head>
sección:
Ejemplo
Especifique la imagen de fondo en el <style>
elemento:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Imagen de fondo en una página
Si desea que toda la página tenga una imagen de fondo, debe especificar la imagen de fondo en el <body>elemento:
Ejemplo
Agregue una imagen de fondo para toda la página:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Repetición de fondo
Si la imagen de fondo es más pequeña que el elemento, la imagen se repetirá, horizontal y verticalmente, hasta llegar al final del elemento:
Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Para evitar que la imagen de fondo se repita, establezca la background-repeatpropiedad en no-repeat.
Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Portada de fondo
Si desea que la imagen de fondo cubra todo el elemento, puede establecer la background-sizepropiedad en
cover.
Además, para asegurarse de que todo el elemento esté siempre cubierto, establezca la
background-attachmentpropiedad enfixed:
De esta forma, la imagen de fondo cubrirá todo el elemento, sin estirarse (la imagen mantendrá sus proporciones originales):
Ejemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Estiramiento de fondo
Si desea que la imagen de fondo se estire para adaptarse a todo el elemento, puede establecer la background-sizepropiedad en
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
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Más información CSS
De los ejemplos anteriores, ha aprendido que las imágenes de fondo se pueden diseñar utilizando las propiedades de fondo de CSS.
Para obtener más información sobre las propiedades de fondo de CSS, estudie nuestro Tutorial de fondo de CSS .