Pozycjonowanie tła

2.1 Właściwość background-position

Właściwość background-position w CSS jest używana do ustawiania początkowej pozycji obrazu tła w elemencie. Ta właściwość pozwala dokładnie określić, gdzie obraz tła będzie umieszczony wewnątrz elementu. background-position możemy używać do precyzyjnego dostosowywania wyświetlania obrazów tła i tworzenia bardziej skomplikowanych projektów.

Składnia background-position

Właściwość background-position przyjmuje dwie wartości, które wskazują na poziomą i pionową pozycję obrazu tła:

    
      background-position: pozycja-pozioma pozycja-pionowa;
    
  

Jeśli podano tylko jedną wartość, druga wartość domyślnie uznawana jest za center.

Jakie mogą być wartości poziomej i pionowej pozycji:

• Słowa kluczowe:
  • left: wyrównanie do lewej krawędzi
  • center: centrowanie
  • right: wyrównanie do prawej krawędzi
  • top: wyrównanie do górnej krawędzi
  • bottom: wyrównanie do dolnej krawędzi
• Wartości procentowe:
  • Na przykład, 50% 50% pozycjonuje obraz w centrum
  • Wartości procentowe odnoszą się do rozmiarów elementu, a nie obrazu
• Wartości w pikselach:
  • Na przykład, 10px 20px pozycjonuje obraz 10 pikseli od lewej i 20 pikseli od góry
• Kombinacje wartości:
  • Można łączyć słowa kluczowe i wartości procentowe, na przykład, left 50%

2.2 Słowa kluczowe

Słowa kluczowe:

• left, center, right: wyrównanie poziome
• top, center, bottom: wyrównanie pionowe

Przykłady użycia słów kluczowych

Obraz pozycjonowany w górnym lewym rogu:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Obraz pozycjonowany w górnym lewym rogu */
      }
    
  

Obraz pozycjonowany w centrum:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Obraz pozycjonowany w centrum */
      }
    
  

Obraz pozycjonowany w dolnym prawym rogu:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Obraz pozycjonowany w dolnym prawym rogu */
      }
    
  

2.3 Procenty

Wartości procentowe wskazują na pozycję obrazu względem rozmiarów elementu.

Przykłady użycia procentów

Obraz pozycjonowany w centrum:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Obraz pozycjonowany w centrum */
      }
    
  

Obraz pozycjonowany w górnym lewym rogu:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Obraz pozycjonowany w górnym lewym rogu */
      }
    
  

Obraz pozycjonowany w dolnym prawym rogu:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Obraz pozycjonowany w dolnym prawym rogu */
      }
    
  

2.4 Jednostki absolutne (px, em, rem)

Wartości w pikselach lub innych jednostkach absolutnych pozwalają na dokładne pozycjonowanie obrazu.

Obraz pozycjonowany w centrum:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Obraz pozycjonowany 10 pikseli w prawo i 20 pikseli w dół od górnego lewego rogu */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Obraz pozycjonowany 2em w prawo i 3em w dół */
      }
    
  

2.5 Kombinowanie wartości

Możesz łączyć słowa kluczowe i jednostki absolutne, aby stworzyć bardziej precyzyjne pozycjonowanie.

Kombinowanie wartości:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Obraz pozycjonowany 20 pikseli w prawo i 10 pikseli w dół od górnego lewego rogu */
      }