Centrar imágenes de fondo en CSS

1. Utilice las propiedades de fondo para centrar la imagen de fondo en CSS
2. Usar las propiedades width, height, left y top para centrar la imagen de fondo en CSS

Este tutorial demostrará algunos métodos para centrar imágenes de fondo en CSS.

Utilice las propiedades de fondo para centrar la imagen de fondo en CSS

Podemos centrar la imagen de fondo en CSS usando las diferentes propiedades de fondo.

Utilizaremos propiedades como background-image, background-repeat, background-attachment, background-position y background-size para centrar la imagen de fondo. También podemos utilizar la propiedad abreviada background para definir estas propiedades.

La propiedad background-image configurará la imagen usando la función url(). Usamos la propiedad background-repeat para definir el comportamiento de repetición de la imagen.

La propiedad background-attachment define el comportamiento fijo o de desplazamiento del fondo. Podemos establecer la posición inicial del fondo con la propiedad background-position.

Finalmente, podemos establecer el tamaño de la imagen usando la propiedad background-size.

Por ejemplo, seleccione la etiqueta html en CSS y aplique los estilos.

Primero, establezca una imagen de fondo usando la propiedad background-image. A continuación, establezca la propiedad background-repeat en no-repeat.

Luego, escribe la opción fixed para la propiedad background-attachment. Después de eso, aplica la propiedad background-position a la opción center center y la propiedad background-size a cover.

En el siguiente ejemplo, la opción no-repeat evitará que se repita la imagen. Cuando el tamaño de la imagen de fondo es pequeño, la imagen se replicará como filas y columnas.

La imagen de fondo permanecerá fija cuando nos desplacemos por la página ya que hemos utilizado la opción fixed para la propiedad background-attachment. La opción center center en la propiedad background-position colocará la imagen en el centro horizontal y verticalmente.

Finalmente, la opción cover cambiará el tamaño de la imagen para cubrir todo el contenedor html. Por lo tanto, podemos centrar la imagen de fondo usando varias propiedades de fondo en CSS.

Código de ejemplo:

html{
 background-image: url("https://loremflickr.com/320/240");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center center;
 background-size: cover;
}

Usar las propiedades width, height, left y top para centrar la imagen de fondo en CSS

En este método, discutiremos otra forma de centrar la imagen de fondo en CSS usando las propiedades como width, height, left, y top. Podemos establecer la altura y la anchura al 100% para que la imagen ocupe toda la altura y la anchura de la etiqueta body.

El elemento body es el padre del elemento img. Podemos utilizar las propiedades top y left para establecer la distancia de la imagen de fondo a los elementos superior e izquierdo de la imagen.

Cabe señalar que estas dos propiedades solo funcionarán cuando se establezca la propiedad position del elemento.

Por ejemplo, seleccione la etiqueta img y establezca las propiedades width y height al 100%. A continuación, establece la propiedad position a fixed. A continuación, establece las propiedades left y right en 0.

Usamos el valor 0 en las propiedades left y right para no dejar espacio al borde superior e izquierdo de la imagen con el elemento vecino. Como resultado, la imagen encajará en la ventana gráfica del navegador.

De esta forma, podemos usar estas diversas propiedades para centrar la imagen de fondo en CSS.

Código de ejemplo:

 img {
 width: 100%;
 height: 100%;
 position: fixed;
 left: 0;
 top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>