fbpx

Kolor i obrazek w tle

Arkusze stylów dają nam możliwość łatwego wybrania tła dla elementów html. Możemy, określić kolor, ścieżkę do obrazka, określić jego pozycję wewnątrz elementu a nawet połączyć te wszystkie metody dla uzyskania jak najlepszego efektu. Poniżej przedstawiam listę atrybutów związanych z tłem w CSS.

  • backround-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Wybór koloru tła

Kolor tła możemy określić w następujący sposób:

selektror {
    background-color: green;
}

Po wpisaniu takiego kodu tło elementów pasujących do wybranego selektora stanie się zielone. Do dyspozycji mamy trzy sposoby:

  • Angielską nazwą koloru np. “black”, “white”, “red”, “green”, “blue” itp.
  • Poprzez wartości RGB w następujący sposób: “rgb(255,0,0)” dla czerwonego, “rgb(0,255,0)” dla zielonego itd.
  • W zapisie szesnastkowym, który jest najpopularniejszą metodą: “#000000” dla czarnego a “#ffffff” dla białego.

Obrazek jako kolor tła

Jeżeli zajdzie taka potrzba, jako tła zawsze możemy użyć obrazka, podając jego ścieżkę:

selektor {
    background-image: url('nazwa_obrazka.jpg');
}

Taki zapis spowoduje podstawienie obrazka o nazwie nazwa-obrazka.jpg w tle wybranego elementu, bądź grupy elementów html określonych przez selektor. Obrazek będzie wyświetlany w skali 1:1 niezależnie od wielkości elementu, którego jest tłem. Jeżeli element będzie większy od obrazka, ten będzie się powielał aż do wypełnienia całej przestrzeni, w przeciwnym wypadku zobaczymy zaledwie jego fragment. Cechy te możemy oczywiście kontrolować poprzez pozostałe atrybuty oferowane nam przez język CSS.

Sprawdź kursy HTML!
Jeśli chcesz dowiedzieć się więcej o języku HTML i stać się ekspertem HTML, zachęcamy do wzięcia udziału w naszych kursach HTML!.

Obrazki musimy wskazywać względem lokalizacji pliku CSS. Jeżeli obrazek znajduje się w folderze “images” należy wpisać ścieżkę w postaci ./images/nazwa_obrazka.jpg. Jeżeli obrazek jest niżej w strukturze folderów niż plik css napiszemy ../nazwa_obrazk.jpg.

Jeżeli z jakiegoś powodu zajdzie potrzeba, pozbycia się obrazka z tła, nadanego przez jakąś inną klasę możemy skorzystać z zapisu background-image: none;

Powielanie obrazka w tle

Jak już wspomnieliśmy wcześniej standardowo w przeglądarkach jeżeli nie zostało nigdzie ustalone inaczej obrazek będzie powielany do wypełnienia całej przestrzeni elementu, dla którego został ustawiony. Pisałem też, że cechę tą możemy kontrolować.

Jeżeli chcemy mieć pewnosć, że jakaś “egzotyczna” przeglądarka nie nadpisze innego ustawienia domyślnego, ani wartość nie zostanie odziedziczona z innego slektora powinnismy wpisać kod backgorund-repeat: repeat;

Obrazek wyświetlony tylko raz

Przykład pokazujący jak pozbyć się powielania obrazka:

selektor {
    background-image: url('nazwa_obrazka.jpg');
    background-repeat: no-repeat;
}

Po dodaniu deklaracji z atrybutem background-rpeat o wartości no-repeat tło zostanie wyswietlone tylko raz od lewego górnego rogu o ile oczywiście w żadnej innej części kodu nie jest ustanowione inaczej.

Powielanie w pionie i poziomie

Jeżeli chcemy obrazek może powielać się tylko w jednej osi. Zależnie od wyboru można podać wartość repeat-x bądź repeat-y Np. tak:

selektor {
    background-image: url('nazwa_obrazka.jpg');
    background-repeat: repeat-x;
}

Niezależnie od tego czy ustawiliśmy obrazek w tle i w jaki sposób to zrobiliśmy warto zastanowić się co stanie się w przypadku kiedy z jakiegos powodu ten się nie wczyta. Aby uniknąć potencjalnego efektu niewidzialnego tekstu warto poza obrazkiem ustawić jednocześnie kolor tła, który będzie gwarantem czytelności naszej treści.

Pozycja obrazka w tle

Czasami może pojawić się potrzeba, żeby obrazek pojawił się raz, ale w innym rogu elementu zawierającego, niż ma to miejsce domyślnie. Czasami, możemy chcieć, aby aby obrazek powielał się w pionie, ale 20 pixeli do lewej krawędzi elementu. Z pomocą w takich sytuacjach śpieszy nam atrybut background-position.

Słowne określanie pozycji
selektor {
   background-image: url('nazwa_obrazka.jpg');
   background-repeat: no-repeat;
   background-position: right bottom;
}

Taki zapis spowoduje zmianę pozycji wyświetlenia obrazka z domyślnego lewego górnego rogu na prawy dolny. Pierwsza wartość określa wyrównanie w osi x a druga w y. W osi x można przyjąć wartości left (lewo), center (środek) right (prawo). W osi y natomiast top (góra), center (środek) i bottom (dół). A oto lista wszystkich możliwych pozycji:

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
udostępnij:
Gratulacje!
Wniosek został wysłany prawidłowo.
Dziękujemy za przesłanie zapytania. Skontaktujemy się z Tobą najszybciej jak to możliwe.