HTML Imágenes de fondo
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 atributo HTML style y el CSS imagen de fondo background-image propiedad:
Ejemplo
Agregar una imagen de fondo en un elemento HTML:
<div style="background-image: url('img_girl.jpg');">
Inténtalo tú mismo »
También puedes especificar la imagen de fondo en el elemento <style> en la sección <head>:
Ejemplo
Especifique la imagen de fondo en el elemento <style>:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Inténtalo tú mismo »
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 elemento <body>:
Ejemplo
Añade una imagen de fondo para toda la página:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Inténtalo tú mismo »
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:
Para evitar que la imagen de fondo se repita, establezca la propiedad background-repeat en no-repeat.
Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Inténtalo tú mismo »
Portada de fondo
Si desea que la imagen de fondo cubra todo el elemento, puede establecer la propiedad background-size en cover
Además, para asegurarse de que todo el elemento esté siempre cubierto, establezca la propiedad background-attachment en fixed:
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>
Inténtalo tú mismo »
Estiramiento de fondo
Si desea que la imagen de fondo se estire para ajustarse a todo el elemento, puede establecer la propiedad background-size en 100% 100%:
Intente cambiar el tamaño de la ventana del navegador y verá que la imagen se estirará, pero siempre cubrirá todo el elemento.
Ejemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Inténtalo tú mismo »
Más información CSS
De los ejemplos anteriores, has aprendido que a las imágenes de fondo se les puede aplicar estilo utilizando las propiedades de fondo CSS.
Para obtener más información sobre las propiedades de fondo de CSS, estudie nuestro Tutorial de fondo de CSS.
