¿Cómo puedo controlar la repetición y la posición de una imagen de fondo?

Esto se logra principalmente con las propiedades background-repeat y background-position.

1. background-repeat (Control de la repetición):

Esta propiedad define si la imagen de fondo se repetirá para llenar el espacio del elemento y, en caso afirmativo, cómo lo hará. Los valores más comunes son:

• repeat (valor por defecto): La imagen se repite tanto horizontal como verticalmente hasta cubrir todo el fondo del elemento.
• no-repeat: La imagen no se repite. Se muestra una sola vez en la posición especificada por background-position.
• repeat-x: La imagen se repite únicamente en la dirección horizontal (a lo ancho).
• repeat-y: La imagen se repite únicamente en la dirección vertical (a lo alto).
• space: La imagen se repite tanto como sea posible sin recortar ninguna instancia. El espacio sobrante se distribuye uniformemente entre las imágenes.
• round: La imagen se repite y, si es necesario, se estira o encoge para que un número entero de instancias quepa perfectamente dentro del área del elemento.

.ejemplo-repeat {
  background-image: url('patron.png');
  /* Evita que la imagen se repita */
  background-repeat: no-repeat;
}Lenguaje del código: PHP (php)

2. background-position (Control de la posición):

Esta propiedad establece la posición inicial de la imagen de fondo. Si la imagen no se repite (background-repeat: no-repeat;), esta será su única ubicación. Si se repite, este es el punto de origen desde el cual comienza el mosaico.

Puedes definir la posición usando uno o dos valores:

• Palabras clave:
  • Para el eje horizontal (X): left, center, right.
  • Para el eje vertical (Y): top, center, bottom.
  • Puedes combinarlas, por ejemplo: center top, left bottom. El valor por defecto es 0% 0% (equivalente a left top). Si solo especificas una palabra clave, la otra se asume como center.
• Porcentajes: 50% 50% (centra la imagen), 0% 0% (arriba a la izquierda), 100% 100% (abajo a la derecha). El porcentaje alinea un punto en la imagen con el mismo punto porcentual en el contenedor.
• Unidades de longitud (px, em, rem, etc.): 20px 10px (20px desde la izquierda y 10px desde arriba).

Si usas dos valores, el primero suele ser para la posición horizontal y el segundo para la vertical.

.ejemplo-position {
  background-image: url('logo.png');
  background-repeat: no-repeat; /* Importante para ver el efecto de la posición */
  width: 300px;
  height: 200px;
  border: 1px solid #eee;

  /* Centra la imagen tanto horizontal como verticalmente */
  background-position: center center;
  /* Otras opciones: */
  /* background-position: right bottom; */
  /* background-position: 20px 50%; */
}Lenguaje del código: PHP (php)

Combinando background-image, background-repeat, background-position, y también background-size (para controlar el tamaño de la imagen), obtienes un control muy completo sobre la apariencia de tus fondos.