config

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS background-origin

Definicja stylu, przeznaczenie i użycie background-origin

Właściwość background-origin określa położenie początkowe (obszar pozycjonowania tła) obrazu tła.

Uwaga: ta właściwość nie działa, jeśli element ma właściwość background-attachment z wartością fixed.

Wartości właściwości background-origin

Wartość Opis
padding-box Domyślnie. Obraz tła zaczyna się od lewego górnego rogu krawędzi dopełnienia.
border-box Obraz tła zaczyna się od lewego górnego rogu obramowania.
content-box Obraz tła zaczyna się od lewego górnego rogu treści.
initial Ustawia tę właściwość na jej wartość domyślną
inherit Dziedziczy tę właściwość z elementu nadrzędnego

Składnia CSS background-origin

background-origin: padding-box | border-box | content-box | initial | inherit;

Wsparcie przeglądarek dla właściwości background-origin

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość chrome edge firefox safari opera
background-origin 4.0 9.0 4.0 3.0 10.5

 

Przykładowe zastosowania z właściwością background-origin

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:
background-origin:

 
Rezultat:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Kod CSS:
#myDIV {
padding:25px;
border:10px dotted #000000;
background-image:url('/images/kurs-style-css/sample.jpg');
background-origin:border-box;
background-repeat:no-repeat;
}
 

 

Przykłady właściwości background-origin

background-origin: padding-box;

background-origin: content-box;

background-origin: border-box;

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, Tel.: +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
Tel.: +48 780 060 995,
Pon. - pt. 8:00 - 17:00