itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-978 page-child parent-pageid-252 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

20. Imágenes de fondo

Se puede especificar una imagen de fondo para casi cualquier elemento HTML. Para agregar una imagen de fondo en un elemento HTML, usa el atributo HTML style y la propiedad de background-image de CSS.

Ejm

<p style="background-image: url('img_girl.jpg');">

También puedes especificar la imagen de fondo en el elemento <style>, en la sección <head>.

Ejm

<style>{
  background-image: url('img_girl.jpg');
}
</style>

Imagen de fondo en una página

Si deseas que toda la página tenga una imagen de fondo, debes especificar la imagen de fondo en el elemento <body>.

Ejm

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Background repeat

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:

Ejm

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

Portada de fondo

Si deseas que la imagen de fondo cubra todo el elemento, puedes configurar la propiedad background-size para que cubra. Además, para asegurarte de que todo el elemento esté siempre cubierto, establece 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).

Ejm

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Background stretch (estiramiento de fondo)

Si deseas que la imagen de fondo se estire para adaptarse a todo el elemento, puedes establecer la propiedad background-size en 100 % 100 %:

Ejm

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
Scroll al inicio