Ładna grafika w tle🖼
We wcześniejszych postach używałem już tego rozwiązania ale nie tłumaczyłem. Teraz jest na to czas!
Zamiast koloru w tle, możemy również ustawić grafikę lub zdjęcie. Daję nam taką możliwość właściwość background-image: url(‘…’); gdzie w miejscu kropek podajemy ścieżkę do pliku graficznego.
Musimy rozróżnić typy ścieżek. Dzielimy je na względne, tzn. plik html jest na tym samym serwerze co grafika. Można także podawać ścieżki bezwzględne z przedrostkiem “http://”.
Nowego przykładu nie będę tworzyć. Przytoczę jedynie ostatni przykład z ostatniego posta. Znajdziesz tam właściwość background-image🙂
trusting-dubinsky-7rvws
trusting-dubinsky-7rvws by danielminschinski
Powielanie grafiki tła
Wstawiona grafika w tło, jeśli jest mniejsza niż obszar który ma wypełnić, powiela się niczym mozaika, aby pokryć całą powierzchnie elementu HTML.
Ustawienie grafiki tła jest możliwa dzięki właściwości background-repeat. Przyjmuje ona wartości:
- repeat – domyślna, grafika powiela się na całe tło,
- repeat-x – grafika w tle ma się powielać tylko w poprzek,
- repeat-y – grafika w tle ma się powielać tylko w pionie,
- no-repeat – grafika ma się w ogóle nie powielać i być wyświetlana w tle tylko raz.
Posłużymy się ostatnim przykładem, dodając powyższą właściwość.
upbeat-thunder-m1bm8
upbeat-thunder-m1bm8 by danielminschinski
Ustawianie grafiki tła
Powyższy przykład który pokazałem Wam jako zastosowanie właściwości powtarzania jest tak jakby niedokończony. Co można poprawić?
Oczywiście położenie grafiki w tle! A jak? Za pomocą właściwości background-position, który może przyjmować kombinacje wartości: top, bottom, left, right, center. Do właściwości można przypisać jedną lub dwie wartości, np. background-position: top right; co oznacza wyrównanie do górnego prawego rogu.
Tak więc wyrównajmy naszą grafikę w naszym przykładzie.
pensive-brook-3rcol
pensive-brook-3rcol by danielminschinski
Rozmiar grafiki tła
Powtórzę się…😃 Powyższy przykład który pokazałem Wam jako zastosowanie właściwości ustawiania jest tak jakby niedokończony. Co można poprawić?
Oczywiście można poprawić rozmiar grafiki za pomocą właściwości background-size. Domyślnie ma ona 100%, ale jeśli nadamy tej właściwości np. wartość 150%, być może wypełni nasz baner na stronie.
Ale my nie mamy zgadywać, tylko stosować rozwiązania które wypełnią pustą przestrzeń. Powyższa właściwość przyjmuje wartość cover, która automatycznie powiększa zdjęcie w tle o tyle, aby pokryć całą dostępną przestrzeń w elemencie.
Spójrz na przykład zastosowania powyższej właściwości.
new-http-h1l3l
new-http-h1l3l by danielminschinski
Kropka. Poznaliście podstawy zastosowania niektórych właściwości tła na stronie. Jest ich wiele, ale są naprawdę intuicyjne. W Google znajdziecie o nich wszystko więc jak macie jakiś pomysł na edycję grafiki w tle to wystarczy poszperać w wyszukiwarce😉
W kolejnym poście poruszę temat o przezroczystości i cieniowania elementów na stronie✔
Tak więc do kolejnego materiału z góry zapraszam❕
Polecam zapisywać się do Newslettera 
oraz śledzenia Fb
Pozdrawiam🖐
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA