Background-origin w CSS3

By /

CSS

Właściwość background-origin w CSS3 określa, skąd ma rozpoczynać się rysowanie tła elementu. Pozwala to na precyzyjne kontrolowanie umiejscowienia obrazów tła względem obszaru elementu, na którym są stosowane. CSS3 oferuje trzy możliwe wartości dla tej właściwości: border-box, padding-box oraz content-box, które pozwalają na różne sposoby umiejscowienia tła w kontekście modelu pudełkowego CSS.

Przykład wykorzystania background-origin

Poniższy przykład demonstruje użycie background-origin w połączeniu z prostym HTML i CSS. Nie wymaga on użycia JavaScript, ponieważ background-origin jest czysto stylistyczną właściwością CSS.

<!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-origin w CSS3</title>
    <style>
        .example-box {
            width: 300px;
            height: 200px;
            border: 5px solid black;
            padding: 20px;
            background-image: url('example-image.jpg');
            background-repeat: no-repeat;
        }

        .border-box {
            background-origin: border-box;
        }

        .padding-box {
            background-origin: padding-box;
        }

        .content-box {
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="example-box border-box">
        background-origin: border-box;
    </div>

    <div class="example-box padding-box">
        background-origin: padding-box;
    </div>

    <div class="example-box content-box">
        background-origin: content-box;
    </div>
</body>
</html>

W tym przykładzie tworzymy trzy divy z klasami border-box, padding-box i content-box, aby zademonstrować różnice w renderowaniu tła. Każdy z divów ma ustawione tło (background-image), a właściwość background-origin jest stosowana, aby zmienić punkt odniesienia dla umiejscowienia tła.

  • border-box: Tło rozpoczyna się od zewnętrznej krawędzi ramki elementu.
  • padding-box: Tło jest rysowane wewnątrz ramki, rozpoczynając od zewnętrznej krawędzi obszaru padding.
  • content-box: Tło jest rysowane wewnątrz obszaru padding, rozpoczynając od zewnętrznej krawędzi obszaru zawartości elementu.

Podsumowanie

Właściwość background-origin w CSS3 umożliwia precyzyjne kontrolowanie, skąd ma rozpoczynać się rysowanie tła elementu. Dzięki temu możemy dokładnie określić, jak tło ma być pozycjonowane względem obszarów border, padding i content modelu pudełkowego. Jest to szczególnie przydatne w projektach webowych, gdzie precyzyjne pozycjonowanie elementów graficznych odgrywa kluczową rolę w tworzeniu atrakcyjnych i funkcjonalnych interfejsów użytkownika.

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

 

Powiązane artykuły

Scroll to Top