#23. Tło z grafiką🌈

Ł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