background-size w CSS3

By /

CSS

Właściwość background-size w CSS3 umożliwia kontrolę nad rozmiarem obrazów tła elementów HTML. Pozwala na dostosowanie obrazu tła tak, aby pasował do różnych wymiarów kontenera, co jest szczególnie przydatne w responsywnych projektach webowych. Można ustawić rozmiar tła, aby pokrywało cały element, dopasowywało się do niego zachowując proporcje, lub miało określone wymiary w jednostkach absolutnych lub względnych.

Przykład użycia background-size

Poniższy przykład kodu demonstruje, jak można użyć background-size w połączeniu z prostym HTML i CSS, aby stworzyć efekt pełnoekranowego tła strony.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania background-size w CSS3</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .background-image {
            /* Pełna ścieżka do obrazu tła */
            background-image: url('background.jpg');
            /* Obraz tła pokrywający cały element */
            background-size: cover;
            /* Obraz tła wyśrodkowany */
            background-position: center;
            /* Obraz tła nie powtarza się */
            background-repeat: no-repeat;
            /* Wysokość kontenera */
            height: 100%;
        }
    </style>
</head>
<body>

<div class="background-image"></div>

</body>
</html>

W powyższym przykładzie, klasa .background-image zostaje zastosowana do diva, który pokrywa całą dostępną przestrzeń okna przeglądarki. Właściwość background-size: cover; sprawia, że obraz tła pokrywa cały element, zachowując proporcje obrazu. Dzięki temu, niezależnie od rozmiaru okna przeglądarki, tło będzie zawsze pełnoekranowe i estetyczne.

Możliwości background-size

Właściwość background-size przyjmuje kilka wartości:

  • cover: Skaluje obraz tła, aby pokrył cały kontener, zachowując proporcje obrazu.
  • contain: Skaluje obraz tła, aby pasował do kontenera, zachowując proporcje, ale bez przycinania obrazu.
  • [szerokość] [wysokość]: Umożliwia ustawienie konkretnych wymiarów obrazu tła. Można używać jednostek absolutnych (np. px, cm) lub względnych (np. %, vw).

Podsumowanie

Właściwość background-size w CSS3 jest potężnym narzędziem, które pozwala na precyzyjną kontrolę obrazów tła w projektach webowych. Umożliwia tworzenie efektownych, responsywnych tła, które dostosowują się do różnych rozmiarów ekranu i urządzeń. Dzięki łatwej w implementacji składni, background-size stała się fundamentem nowoczesnego projektowania stron internetowych, umożliwiając tworzenie atrakcyjnych i funkcjonalnych interfejsów użytkownika.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top