COLOCAR UNA IMAGEN DE FONDO EN UNA PÁGINA WEB

Para añadir una imagen de fondo en una página web, hay usar la

propiedad background-image seguida de un valor, en este caso la URL de la imagen
que vamos a usar de imagen de fondo. La declaración quedaría algo similar a
esto: background-image: url(«/nombre-de-la-imagen.jpg/»).

<style>
body {
heigh:665px;
background-image: url("https://carontestudio.com/img/caronte-web-estudio-
logo.png");
background-size: 10rem;

}
</style>

DIFERENTES TIPOS DE IMAGEN DE FONDO

En el ejemplo anterior hemos visto cómo poner una imagen de fondo en HTML a
través de la propiedad: background-image. Junto a esta propiedad, existen además otras
que complementan como puedes programar una imagen de fondo en HTML. Las
propiedades que puedes usar junto a background-imagen son las siguientes:

BACKGROUND-REPEAT
La propiedad “background-repeat” repite por defecto la imagen de fondo hasta cubrir
por completo la superficie del elemento que lo contiene. Por ejemplo, si nuestra página
web mide 800px de alto y 800px de ancho, y el fondo de la imagen mide 100x100px, el
fondo se repetirá hasta cubrir los 800px.
Los valores que esta propiedad admite son los siguientes:
 repeat: La imagen de fondo siempre se repetirá hasta llenar el contenedor.
 repeat-y: Se repite únicamente de manera vertical, es decir en el eje y.
  repeat-x: Se repite únicamente de manera horizontal, es decir se repetirá en
el eje-x.
 no-repeat: La imagen se muestra, pero no se repite.
Por defecto, esta propiedad tiene el valor «repeat». Lo habitual, cada vez que usas la
propiedad «background-image», es usar la propiedad «repeat» con el valor «no-
repeat».
En el siguiente ejemplo verás una imagen de fondo que se repite solo en el eje vertical.

<style>
body {
heigh:665px;
background-image: url("https://carontestudio.com/img/caronte-web-estudio-
logo.png");
background-repeat: repeat-y;
background-size: 10rem;
}
</style>

BACKGROUND-POSITION
Si tenemos una imagen de fondo que hemos decidido no repetir a lo largo de todo el
contenedor, es posible que esta imagen no cubra la totalidad de la superficie y por
tanto, quede espacio libre. En ese caso, es posible determinar la posición de la imagen
de fondo mediante la propiedad “background-position”.
También es posible determinar esta propiedad incluso cuando la imagen de fondo ocupe
todo el ancho o el alto, pudiendo escoger su posición en el eje vertical u horizontal,
dependiendo del caso. Veamos en el siguiente ejemplo como centrar una imagen de
fondo en el centro del contenedor:
<style>
body {
height: 500px;
background-image: url("https://carontestudio.com/img/caronte-web-estudio-
logo.png");
background-repeat:no-repeat;
background-position-x:center;
background-position-y:center;
background-size: 10rem;
}
</style>

BACKGROUND-SIZE
También podemos definir el tamaño que tendrá la imagen de fondo, si esta no se repite
y tampoco ocupa la totalidad del contenedor.
Por defecto, el tamaño de la imagen de fondo se mostrará al máximo de su tamaño. Si
por ejemplo, la imagen es más grande que el contenedor, solo veremos parte de la
imagen. Para solucionarlo, podemos definir el tamaño de la imagen con la propiedad
«background-size«, junto a un valor que puede ser indicado con diferentes
medidas relativas o absolutas (rem, em, %, picas, cm, px, etc)
En el siguiente ejemplo vamos a ver como poner una imagen de fondo que ocupe la
totalidad del contenedor:
<style>
body {
height: 400px;
background-image: url("https://carontestudio.com/img/caronte-web-estudio-
logo.png");
background-size: cover;
background-repeat:no-repeat;
background-position: center center;
}
</style>
BACKGROUND-ATTACHMENT

Esta propiedad determina el comportamiento de la imagen de fondo durante el scroll

de la página. Esto significa que podemos escoger si el fondo permanecerá estático o
acompañara al scroll de la ventana del navegador del usuario. Para dejar la imagen
estática, el valor a indicar debe ser: «fixed«. Por el contrario, si queremos que haga
scroll, o bien no definimos esta propiedad, o la forzamos con el valor: «scroll«.

Es muy habitual emplear la combinación de fondos con distintos comportamientos o

similares.

<style>
body {
height: 800px;
background-image: url("https://carontestudio.com/img/caronte-web-estudio-
logo.png");
background-size: cover;
background-size: 25rem;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>