Posicionamiento del fondo

2.1 Propiedad background-position

La propiedad background-position en CSS se utiliza para establecer la posición inicial de una imagen de fondo en un elemento. Esta propiedad permite determinar con precisión dónde se colocará la imagen de fondo dentro del elemento. background-position puede usarse para ajustar finamente la visualización de las imágenes de fondo y crear diseños más complejos.

Sintaxis de background-position

La propiedad background-position toma dos valores, que indican la posición horizontal y vertical de la imagen de fondo:

    
      background-position: posición-horizontal posición-vertical;
    
  

Si se indica solo un valor, el segundo valor predeterminado se considera center.

Cuáles pueden ser los valores de la posición horizontal y vertical:

• Palabras clave:
  • left: alineación al borde izquierdo
  • center: centrado
  • right: alineación al borde derecho
  • top: alineación al borde superior
  • bottom: alineación al borde inferior
• Valores porcentuales:
  • Por ejemplo, 50% 50% posiciona la imagen en el centro
  • Los valores porcentuales se refieren al tamaño del elemento, no de la imagen
• Valores en píxeles:
  • Por ejemplo, 10px 20px posiciona la imagen a 10 píxeles del borde izquierdo y 20 píxeles del borde superior
• Combinaciones de valores:
  • Se pueden combinar palabras clave y valores porcentuales, por ejemplo, left 50%

2.2 Palabras clave

Palabras clave:

• left, center, right: alineación horizontal
• top, center, bottom: alineación vertical

Ejemplos de uso de palabras clave

La imagen se posiciona en la esquina superior izquierda:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* La imagen se posiciona en la esquina superior izquierda */
      }
    
  

La imagen se posiciona en el centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* La imagen se posiciona en el centro */
      }
    
  

La imagen se posiciona en la esquina inferior derecha:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* La imagen se posiciona en la esquina inferior derecha */
      }
    
  

2.3 Porcentajes

Los valores en porcentaje indican la posición de la imagen en relación con los tamaños del elemento.

Ejemplos de uso de porcentajes

La imagen se posiciona en el centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* La imagen se posiciona en el centro */
      }
    
  

La imagen se posiciona en la esquina superior izquierda:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* La imagen se posiciona en la esquina superior izquierda */
      }
    
  

La imagen se posiciona en la esquina inferior derecha:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* La imagen se posiciona en la esquina inferior derecha */
      }
    
  

2.4 Unidades absolutas (px, em, rem)

Los valores en píxeles u otras unidades absolutas permiten posicionar la imagen con precisión.

La imagen se posiciona en el centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* La imagen se posiciona a 10 píxeles a la derecha y 20 píxeles hacia abajo desde la esquina superior izquierda */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* La imagen se posiciona a 2em a la derecha y 3em hacia abajo */
      }
    
  

2.5 Combinación de valores

Puedes combinar palabras clave y unidades absolutas para crear un posicionamiento más preciso.

Combinación de valores:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* La imagen se posiciona a 20 píxeles a la derecha y 10 píxeles hacia abajo desde la esquina superior izquierda */
      }